React其它相关知识点

React其它相关知识点

一，解释一下React Fiber？

简单来说，核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈，和虚拟dom一样，这个虚拟调用栈也是在内存中的，这个虚拟调用栈就类似于一个任务调度器，它可以暂停一个任务，也可以重启一个任务，也可以终止一个任务，还能给任务分配优先级，这样栈的执行顺序就能定制了。React Fiber利用分片的方式，将渲染分割成了多个事务，然后根据每个事务的执行优先级来进行渲染，从而提升渲染计算性能。

二，React性能分析？

1，可以借助 Chrome Devtools 的 Performance 面板

通过观察 Frames（帧）那一栏，会显示对应的fps，如果低于60的，就会有卡顿感，找到了卡顿的点，再去查看Main 那一栏展开，这一栏主要是会列出JS的调用栈，然后就能看到对应的执行时间，找到执行较慢的函数，从而定位到问题。

2，可以利用React devtools

React 16.5版本引入了Profiler功能，通过Record来分析一段组件更新的数据，主要是监测的React组件commit阶段，借助rank视图或者火焰图来观察组件状态更新时的渲染时间以及是否存在渲染浪费。

（React 16以后，组件渲染分为render阶段和commit阶段，render阶段决定了需要进行哪些变更，比如DOM，这个阶段会调用render函数；而commit阶段主要就是执行一些diff出来的变更请求，比如DOM的插入、更新、删除等，还会调用didmount、didupdate等生命周期函数）

三，React错误捕获？

React提出了一个错误边界的概念，就是在组件最外层包一个捕获错误的组件，只要组件里定义了static getDerivedStateFromError或者componentDidCatch方法，两个中的一个，当子组件有错误抛出时，就会进行捕获。

四，为什么操作DOM很耗性能？

不一定。

以Chrome为例，DOM对象是使用C++开发的，而通过V8 binding，在V8引擎内会有一个和DOM对象对应的JS对象，我们称之为Wrapper objects（包装对象），操作DOM其实就跟操作JS对象一样。

如果只是修改document的一个属性，其实速度和修改对象的一个属性一样，但是如果是修改像document.title，那就不一样了，这等于是修改了原生DOM对象的属性了，所以这时候的性能损耗，其实就是用在JS对象和DOM对象的转换和同步上面。

还有就是重排和重绘，

五，聊一聊diff算法

传统的diff策略是循环递归所有的节点，进行依次对比，复杂度是O (n ^ 3)

react diff策略三点：

1，tree diff

Web UI中DOM节点跨层级的移动操作特别少，因此两棵树只会比较同一层级的节点

2，component diff

拥有相同类的两个组件会产生相似的树形结构，如果类不同，则默认不同

3，element diff

对于同一层级的一组子节点，可以通过唯一id进行区分，也就是设置唯一key进行优化