react 面试题

react 事件机制

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，

当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。

这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。

 

 JSX的理解

是 JavaScript 扩展语法。 JSX 是 JavaScript XML 的简写      浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX，所以为了使浏览器能够读取 JSX，首先，需要用 Babel 转换器将 JSX 文件转换为 JavaScript 对象，然后再将

其传给浏览器

 

shouldComponentUpdate

这个方法用来判断是否需要调用 render 方法重新绘制 dom，因为 DOM 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

React  性能优化是哪个周期函数    shouldComponentUpdate

 

Keys

是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过
程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动
而来的元素，从而减少不必要的元素重渲染；

 

在代码中调用setState函数 后    会发生什么     

 react会讲传入和参数对象，和组件当前的状态进行合并，然后触发所谓的调和过程     经过调和过程之后   会以相对高效的方式  根据新的状态构建react元素树   并着手 渲染整个UI页面，

在react得到元素树的时候    react会根据diff算法自动计算出 老的渲染树和新的渲染树的差异，根据差异进行最小化渲染，

在diff算法中，会根据key 精确地知道哪些元素在什么位置发生了什么变化。这样就可以按需加载，不需要全部进行渲染，避免了性能浪费

合并状态 ---->触发调和过程------>    根据新的状态 构建react元素树-------->      根据diff算法对比差异  ，按需渲染，节约性能。

 React 中 t component 和 和 t pureComponent 区别是什么?

PureComponent其实就是一个继承自Component的子类，会自动加载shouldComponentUpdate函数。当组件需要更新的时候，shouldComponentUpdate会对组件的props和state进行一次浅比较。如果props和state都没有发生变化，那么render方法也就不会出发，当然也就省去了之后的虚拟dom的生成和对比，在react性能方面得到了优化。

React 的 diff 原理

diff（翻译差异）：计算一棵树形结构转换成另一棵树形结构的最少操作
1. 把树形结构按照层级分解，只比较同级元素
2. 给列表结构的每个单元添加唯一的 key 属性，方便比较
3. React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
4. 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环
结束, React 检查所有标记 dirty 的 component 重新绘制
5. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能