React 面试筹备不彻底指南

开篇

咱们今天主要讲解的内容就是关于 React 面试相关的，我相信你在面试中，也会被问到各类各样的很是多的问题，我举几个例子你看看，在本身内心想想，你会怎么回答？

为何 React 选择使用 JSX ？

JSX 映射虚拟 Dom 的原理

setState 究竟是同步的，仍是异步的？

如何面向组件跨层级通讯？

聊聊 Redux 和 Vuex 的设计思想有什么不一样和相同之处？

React 事件与 DOM 事件有什么区别？

为何 React 要加入 Hook ?

说一下你对 diff 算法的理解

谈一谈 React 的数据流管理

上面这些问题，很是的常见，除此以外，相似的问题还有不少，一个一个的讲，根本讲不完，也不可能每一个都讲到；固然网上有不少面试宝典，各类典型面试题都会涉及到，你们可能最近都在准备面试，迫切想要知道这些问题的答案，这也是你们最容易陷入的一个职场误区，对本身的现状不满，想要跳槽涨薪，又缺少平常积累，面试前疯狂的刷一些面试题，应付当前的几场面试，1-2年后，又一次轮回，忽略平常的积累和总结，总想着临阵才磨枪，却是会有些闪亮，但永远不会锋利；

解这些题，并非今天的重点，我想给你的，是一套方法论，是解决这一类问题的通用方法：

整体来讲分为三个部分：

1：对 React 框架的全面了解；

这须要你在平常的开发中，不断积累总结，有意识的主动探索和思考，今天我就分享一下我本身的总计和思考，没有绝对的正确，但我相信必定对你有所启发；

2：面试问题解答的思路和技巧；

我对 React 的使用有不少经验了，写过几个项目，也有了本身的思考和理解，可是，在面试的时候，是否是又这样的状况呢？知道这个知识点，但不能准确完整地表达、不知道该如何描述，但当面试官提起的时候，又能记忆起来，说，“对对对，就是那个，我刚确实不知道该怎么讲”。肚子里有东西，却在嘴上吃了大亏？

3：经典面试题案例解答

前面介绍了这些思路和技巧，那么如何应用到具体的问题解答上呢？咱们使用几个比较典型的面试题案例来解答；

如何理解 React 框架？

先从前端框架的发展来看，以前是没有前端框架这样的工具的，可是前端的业务量愈来愈大，页面变得愈来愈复杂，前端的工程也开始庞大了起来，如何组织代码结构，如何有效提高复用率，开始成为大型前端项目迫切须要解决的问题。2009年，带有大量的 Java 开发思想的 AngularJS 问世：angular.cn/ ；

AngularJS 提供了一揽子全家桶解决方案，从底层开始深度封装，向上提供了路由、双向绑定、指令、组件等框架特性。如今也同样，你须要的，它所有都有，可是学习成本过高了，各类全新概念目不暇接，让咱们一度怀疑我写的不是 前端代码，而是 AngularJS 代码；

而 React 的思惟模式是彻底不一样的，概念也极为简单：“一切皆组件”，而 组件 == Function / Class ；

官方手册 react.docschina.org/ 的第一句话就是 “ 用于构建用户界面的 JavaScript 库 ” ；

从各自的 “一句话” 介绍中，咱们也能够看到，React 把本身定义为 “ JavaScript 库 ”，而 AngularJS 才是 “框架”，虽然咱们常常说 “React 框架”，可是人家历来都说本身是个 库 的，框架这个名字，是咱们强加给人家的，不要以为这仅仅是一个称呼而已，其实从必定程度上，确实误导了不少人，尤为是新手，甚至有过几年工做经验的老油条，也在误会着 React ，那这个误会是怎么来的呢？

其实在 React 中，只有组件，没有页面，没有控制器，也没用模型，在 AngularJS 框架中这些习觉得常的概念，React 通通没有。没有页面？那就用组件组合生成一个页面，没有控制器，那就用组件充当控制器。就像搭建乐高玩具同样，组件就是组成整个应用惟一零部件。

可是从实际编码上来说，能够是纯函数组件或者类组件，也可能在函数中产生影响 UI 生成的反作用，好比直接操做 DOM 或者绑定事件等。在 React 中咱们只须要关心两件事：数据与组件。React 负责组件开发者负责数据；这也就是我所理解的 MVVM 框架的概念；程序员负责 MV 的处理，React 负责 VM 的构建；那么对于 React 自己来讲就只负责构建视图的工做了，所以在适用场景上远比传统框架更为普遍，你可使用 React-dom 开发 PC 网页或者移动端网页；使用 React-Native，开发 iOS 与 Android 应用；还有 React-360 能够开发 VR 应用；甚至可使用 React-ink 开发命令行应用。

固然 React 也有缺点， 因为 React 并非一个典型的框架，好比路由、状态管理这样的功能，React 团队更但愿交给社区来解决。因此致使在技术选型与学习使用上有比较高的成本。但也正由于社区蓬勃发展，非官方的一揽子解决方案仍是有的，好比 Redux、 React Router 、组件库 Antd 、长列表 React-window 等填补了生态位的缺失。而平常开发应用，这些总要去学习使用，而更多的人，将这些社区的方案看成了 React 的一部分，所以就以为 React 是个 “框架” 了，这样的说法虽然不许确，但其实也不必必须纠正，由于 “React+社区方案” 的组合，确实是一个框架应该有的样子；也正为如此，React 成了一个使用者上限与下限差距极大的框架， 而社区方案的组合和应用能力，也成为了进大厂的必考内容；

虽然我这里在必定程度上拿 AngularJS 和 React 再作对比，可是请注意，若是你以为 AngularJS 无懈可击宇宙无敌吊炸天，那必定是你说的对，而若是你以为 Vue 无懈可击宇宙无敌吊炸天，那固然也是你说的对；

对于各类框架的对比调查也有不少，正巧，前一段时间 stateofjs2020 刚刚发布，你们感兴趣能够去看看一下；

stateofjs 2020 年度前端开发者调查报告：2020.stateofjs.com/zh-Hans/tec…

报告显示，React 的占用量明显高于 Vue 和 AngularJS , 80%的调查者使用英语语种，说白了，就是欧美方面的调查，并不能说明国内的状况，而 react 在 Github 的 star 是 164K，Vue2.x 在 Github 的star 是 180K，你们也能够本身去看看，github.com/facebook/re… NPM 的下载数；

其实，我想说的是，不要作那个框架好的对比， Vue 和 React 或者AngularJS 或者其余 MVVM 框架，都是很是优秀且值得学习的，也都有各自的优势和缺点；与其在网络上撕逼，不如认真学习学习，奉劝各位，井蛙不可语海，夏虫不可语冰；

总结一下：

React 本质上就是一个构建用户界面的 JavaScript 库，经过组件化的方式解决视图层开发复用的问题；

组件化的优点在于视图的拆分与模块复用，能够更容易作到高内聚低耦合，

通用性更强，一次学习，随处编写。好比 React Native，React 360 等， 这里主要靠虚拟 DOM 来保证明现。

这使得 React 的适用范围变得足够广

但做为一个视图层的框架，React 的劣势也十分明显。它并无提供传统框架的一整套完整解决方案，在开发大型前端应用时，须要向社区寻找并整合解决方案。虽然必定程度上促进了社区的繁荣，但也为开发者在技术选型和学习适用上形成了必定的成本。

为何 React 选择使用 JSX ？

这里问 “为何 React 选择使用 JSX ？”，其引伸含义是 “为何不用 A、B、C？”

举个例子，你二婶儿给你介绍了俩对象，一个温婉可爱小鸟依人，一个上得厅堂下得厨房，结果你依然选择单身不找对象，你二婶儿就问你为啥呀？你若是说单身有多好，你必定会被怼？怎么回答呢？温柔的太粘人，贤惠的长得丑；而后在说单身有多好；

套路就是，之因此选择x，是由于 y 和 z 很差，而后再说明 x 怎么怎么好；

可是，放到技术上，要答好这个问题，为何 React 选择使用 JSX ？你须要先了解 React 可选的其余解决方案，而后才能知道有什么很差的地方；其实相关方案有不少，最直观的就是 模板，Vue 和 AngularJS 都选择使用模板方案，而 React 团队认为引入模板是一种不佳的实现，你以为模板很差吗？我以为还行啊，你以为丑，我以为美若天仙啊；这不只仅是眼光不一样，更多的是基于不一样的角度来思考，再结合自身的特性作出的选择，React 团队之因此认为模板不是最佳实现，缘由在于，React 团队认为模板分离了技术栈，分散了组件内的关注点，其次模板还会引入更多的概念，相似模板语法、模板指令等，JSX 并不会引入太多新的概念，它仍然是 JavaScript，就连条件表达式和循环都仍然是 JavaScript 的方式。更具备可读性，更贴近 HTML。而对于关注点分离这个问题，咱们能够用两段代码来展现：

上面的两端代码分别使用了 React 及 Vue 的单文件组件来呈现，在 React 中，声明的 Users 类就是一个组件，所有的 方法、数据及 UI 视图，能够以任意的方式呈现， 而在 Vue 的组件中，很明确的要将 UI 部分写入 template 模板标签中(固然还能够在 component 方法中使用 template 字符串 )，功能及数据相关的 要写入 script 标签中，而相对应的数据展现能力，则须要使用模板指令进行呈现，如：@click 指令绑定点击事件，v-for 循环遍历数据及样式结构；而在 JSX 中，所有都是 JavaScript 的，没什么规矩可言；

两种方式各有不一样，我本身也说不上喜欢那个，可是，站在技术角度，我比较喜欢 JSX ，而站在产品研发角度，我更倾向于 Vue 的模板方式；

就相似我妈作饭超级好吃，选媳妇就选小鸟依人的，可是我妈作饭根本无法吃，我仍是选下得厨房的媳妇要好一些。毕竟程序员是不须要爱情的……

若是你想解答的更加完善，还能够加入其余方式进行阐述，好比 模板字符、JXON；篇幅有限，我这里就不展开说了；

对于 为何 React 选择使用 JSX ？到这里，咱们其实已经说的差很少了，可是，总以为少点什么，那就是对于 JSX 自己的阐述还不到位；

那么 JSX 究竟是什么呢？

咱们知道它不是字符串也不是 HTML，是一个 JavaScript 的语法扩展，用于描述组件 UI 。 实际上，官方手册上早就说的很清楚了，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖，最终会被编译为 React.createElement() 函数调用返回称为 “React 元素” 的普通 JavaScript 对象。

咱们用一段简单的代码展现一下，具体来看看：

上面的代码中，咱们直接将 JSX 的内容打印到控制台，效果以下：

那么，从 JSX 到控制台打印的结果中，到底发生了什么？手册上说 JSX 仅仅只是 React.createElement() 函数的语法糖，那么问题就来了，React.createElement 到底作了什么呢？ 走，翻一下源码看看就知道了

对于这段代码，并无什么高大上的骚操做，在这里，我大体说一下，作了什么事情：

React. createElement 二次处理 key、ref、self、 source 四个属性值；

遍历 config，筛出能够提进 props 里的属性；

提取子元素，推入 childArray（也即 props.children）数组；

格式化 defaultProps；

结合以上数据做为入参，发起 ReactElement调用；

那么接着让咱们进入到 ReactElement 方法，继续查看 到底作了什么事情：

而这些代码就更有意思了，就是把传入的内容，组装进 element 对象并返回，注意，这个 element 实际就是咱们以前打印到控制台的那个对象，其实这个对象就是咱们常说的 ”虚拟 DOM “ ，而从虚拟 DOM 到真实 DOM 的工做，就是咱们调用 ReactDOM.render 方法去作的事情了，这里我们就再也不继续分析了；

来波小总结

为何 React 选择使用 JSX ？本质就是萝卜青菜各有所爱，React 团队认为 JSX 不会引入太多新的概念，编码更纯净，更具备可读性，更贴近 HTML，而对于 JSX 自己来讲，是 React.createElement() 函数的语法糖，createElement() 对参数进行拆解后，发起 ReactElement 调用生成虚拟 DOM 对象；