整理了牛客、CSDN的前端开发八股文面经,结合codecademy.com 上的React教学内容+ React实战开发经验,回答前端面试中React相关的考点。对比小程序开发,梳理必备的React相关的技术概要。一起加油!!!
1.react.js, react-dom.js
react.js 是 React 的核心库,提供React.createElement等方法
react-dom.js 是提供与 DOM 相关的功能,提供ReactDOM.render等方法
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?
首次加载
setState改变组件内部state。 注意: 此处是说通过setState方法改变。
接受到新的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.生命周期
![](https://i-blog.csdnimg.cn/blog_migrate/ed335e6615dfd5b3c1b8180c64944dbd.png)