1. 说一下React的diff算法？
- 把树形结构按照层级分解，只比较同级元素。
- 给列表结构的每个单元添加唯一的
key属性，方便比较。 React只会匹配相同class的component（这里面的class指的是组件的名字）- 合并操作，调用
component的setState方法的时候,React将其标记为 -dirty.到每一个事件循环结束,React检查所有标记dirty的component重新绘制. - 选择性子树渲染。开发人员可以重写
shouldComponentUpdate提高diff的性能
2. React有哪些优化性能的手段?
类组件中的优化手段
-
使用纯组件
PureComponent作为基类。 -
使用
React.memo高阶函数包装组件。 -
使用
shouldComponentUpdate生命周期函数来自定义渲染逻辑。
方法组件中的优化手段
- 使用
useMemo。 - 使用
useCallBack。
其他手段
- 使用
key来帮助React识别列表中所有子组件的最小变化 React组件的服务端渲染
3. 为什么虚拟dom会提高性能？
虚拟dom 相当于在 JS 和真实 dom 中间加了一个缓存，利用 diff 算法避免了没有必要的 dom 操作，从而提高性能。
- 用
JavaScript对象结构表示 DOM 树的结构；然后用这个树构建一个真正的DOM树，插到文档当中 - 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
- 把2所记录的差异应用到步骤1所构建的真正的
DOM树上，视图就更新
4. React 中 refs 的作用是什么?
Refs是React提供给我们的安全访问DOM元素或者某个组件实例的句柄- 可以为元素添加
ref属性然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回
5. 简述下React的事件代理机制？
React并不会把所有的处理函数直接绑定在真是的节点上。而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。
当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象。
当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。
这样做的优点是为了解决兼容性问题，并且简化了事件处理和回收机制（不需要手动的解绑事件，React已经在内部处理了）。但是有些时间React并没有实现，比如window的resize事件。
微信订阅号【前端面试宝典】
欢迎大家关注微信订阅号【前端面试宝典】,我们将频繁更新前端面试题相关面试题专题文章，以及前端相关的技术文章分享。
微信小程序【前端面试宝典】
同时，也欢迎大家访问我们的微信小程序【前端面试宝典】，小程序【前端面试宝典】旨在为前端面试者提供面试题收集和整理，并提供免费在线答题模拟面试服务。
欢迎大家扫码关注我们的小程序【前端面试宝典】，希望在大家的面试过程中，能帮助到大家。
部分试题来源互联网，如有侵权，请联系删除
