【React】React原理面试题集锦

本文集合一些React的原理面试题，方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案，如果想要了解更深刻，可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢。

1. React 的设计思想是什么？

参考链接： https://github.com/camsong/react-basic (这个写的很好，React创始人的角度写的翻译版）

最核心的思想应该是通过函数(Function)完成数据(Data)->视图(UI)的转换，简称UI=f(Data).在这个过程中，会有很多问题。如下：

• 一个函数是无法将Data转成UI的，所以会出现函数套函数的情况，这跟积木一样，积木与积木之前会有组合(组件化思想)，积木与积木之间也要有桥梁进行支撑，这相当于函数与函数之间的数据流，于是催生出了Redux等数据流管理框架。
• 函数的计算是非常耗时的，所以要尽量减少不必要的消耗。这在Dom层面上的体现便是虚拟Dom，在函数上的体现便是缓存计算结果。

2. 虚拟Dom到底是什么？

参考链接： https://juejin.cn/post/6844903870229905422

虚拟Dom更像是Html的Json化，它虽然不是Dom树，但含有Dom树的全部信息。之所以采取虚拟Dom,应该是Json的数据结构更方便做Diff处理。
至于其中的Diff算法，比对新老虚拟Dom的变化，然后将变化的部分更新到视图上。对应到代码上，就是一个 diff 函数，返回一个 patches(补丁)

3. React的生命周期有哪些？

参考链接： https://juejin.cn/post/6914112105964634119

主要分为3个生命周期：

• 挂载： constructor，getDerivedStateFromProps，render，componentDidMount
• 更新：getDerivedStateFromProps，shouldComponentUpdate，render，componentDidUpdate
• 卸载： componentWillUnmount

4. React的事件系统原理？

参考链接：https://juejin.cn/post/6955636911214067720（好文推荐）

首先React里的事件，例如onClick等，并不是原生事件，而是由原生事件合成的React事件。例如click事件合成onClick事件。blur,change，input等合成onChange事件等。所以这里有3个问题。

• 事件是如何合成的？构建React合成事件和原始事件的对应关系以及如何处理事件的关系。
• 事件是如何绑定的？触发了React合成事件，React将这些合成事件分解为若干个原始事件，然后冒泡执行(有些事件会在捕获阶段执行）。
• 事件是如何触发的？会进入统一监听器dispatchEvent进行批量更新，然后插件合成事件源对象，得到事件执行队列，该队列用于模拟事件的捕获->事件源-> 事件冒泡的过程,最后执行事件队列，如果有阻止冒泡那么退出循环。

5. JSX是什么，它和JS有什么区别?

参考链接：https://juejin.cn/post/7182382408807743548

JSX是react的语法糖，它允许在html中写JS，它不能被浏览器直接识别，需要通过webpack、babel之类的编译工具转换为JS执行

区别	JSX	JS
如何编译	通过babel编译转换	可直接编译
引入方式	使JS的拓展，可在html中直接写	需要通过scripts标签引入

6. React的Fiber架构？

参考链接：https://juejin.cn/post/6993973502852202503

首先什么是Fiber: 在React16后提出的概念。Fiber 是 React的一个执行单元，Fiber的主要思想是将UI渲染分成更小的任务，每一个小任务指的就是 Fiber的节点， 拆分的小任务会在浏览器的空闲时间被执行。每个任务单元执行完成后，React 都会检查是否还有空余时间，如果有就交换主线程的控制权，从而能让React平滑渲染UI，避免卡顿。
Fiber架构解决的问题：解决React在处理复杂UI时性能不佳的问题。