Web前端面试准备(React）

整理了牛客、优快云的前端开发八股文面经，结合codecademy.com 上的React教学内容+ React实战开发经验，回答前端面试中React相关的考点。对比小程序开发，梳理必备的React相关的技术概要。一起加油！！！

1.react.js, react-dom.js

react.js 是 React 的核心库，提供React.createElement等方法

react-dom.js 是提供与 DOM 相关的功能，提供ReactDOM.render等方法

详情参考react api和react-dom api

2.JSX语法

是html和Javascript语法的混写

使用Babel对JSX语法解析（html规则、js规则的混用），转译

JSX创建的元素会被Babel转码成React.createElement的调用，执行中调用React.createElement会返回ReactElement的实例。

*Babel的其他作用：向后兼容，当新版本不干扰旧版本的运行，使用babel将ES6+转化成为向后兼容的JS语法

关于Babel的语法解析流程，可参考：https://zhuanlan.zhihu.com/p/603898934

3.React的虚拟DOM树

虚拟DOM树的节点是reactElement实例，reconciliation是构建虚拟树的过程。

reconciliation发生在每一次对render的调用。

了解DOM树的构造案例，可参考🔗

4.render什么时候会被调用，如何调用render？

1. 首次加载

2. setState改变组件内部state。 注意： 此处是说通过setState方法改变。

3. 接受到新的props

5.render函数的作用机制

render(ReactElement, DOM element, 回调函数）的作用就是将虚拟的DOM元素渲染到真实的DOM上，由浏览器完成后续的layout paint等操作。2次渲染的时候（由setState触发)会通过DOM diff算法将重新渲染出的dom树跟原来的dom树进行比较，将更新的地方渲染到真实的DOM上，这样做减少了对DOM的频繁操作，从而提升性能。

6.key的作用、diff算法和性能提高

key是react用来避免在同层节点比较中，因节点不存在的原因而导致的，同类节点销毁或创建。使用key，React只用调整同层同类节点的位置，而不是销毁或创建，从而减少DOM操作的次数，提高性能。

7.生命周期