如何做好 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 问世：https://angular.cn/；

AngularJS 提供了一揽子全家桶解决方案，从底层开始深度封装，向上提供了路由、双向绑定、指令、组件等框架个性。当初也一样，你须要的，它全副都有，然而学习老本太高了，各种全新概念应接不暇，让咱们一度狐疑我写的不是 前端代码，而是 AngularJS 代码；

而 React 的思维模式是齐全不同的，概念也极为简略：“所有皆组件”，而 组件 == Function / Class；

官网手册 https://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 年度前端开发者调查报告：https://2020.stateofjs.com/zh…

报告显示，React 的占用量显著高于 Vue 和 AngularJS , 80% 的调查者应用英语语种，说白了，就是欧美方面的考察，并不能阐明国内的状况，而 react 在 Github 的 star 是 164K，Vue2.x 在 Github 的 star 是 180K，大家也能够本人去看看，https://github.com/facebook/r…、https://github.com/vuejs/vue，如果有工夫，还能够去看看 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 对象；