深入理解React16之：（一）.Fiber架构

React16虽然出了一阵子了。刚出来的时候，粗略看了一遍更新文档。以为没什么大的改动，也听说项目从react15-16的升级过度可以很平滑，再加上项目改版上线一直比较频繁，所以一直还用的15.6的版本。
偶然在知乎看到@程墨Morgan大神的live，便抱着好奇心和学习的心态报名了，受益良多。

我理解的Fiber架构：

改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务。释放浏览器主线程，

1. 要理解Fiber架构，首先要理解react16以前，组建的渲染顺序.

在我之前的一篇文章有简单介绍，阅读react源码--记录：1.1 问题记录
下面从一个具体实例理解一下，再加上我画了图，应该很好理解啦~（图画的有点渣）

假如有A,B,C,D组件，层级结构为：

 

react-2.png

我们知道组件的生命周期为：
挂载阶段：

• constructor()
• componentWillMount()
• render()
• componentDidMount()
  更新阶段为：
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate

那么在挂载阶段，A,B,C,D的生命周期渲染顺序是如何的呢？

 

react-1.png

以render()函数为分界线。从顶层组件开始，一直往下，直至最底层子组件。然后再往上。

组件update阶段同理。

————————
前面是react16以前的组建渲染方式。这就存在一个问题，

如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。

好似一个潜水员，当它一头扎进水里，就要往最底层一直游，直到找到最底层的组件，然后他再上岸。在这期间，岸上发生的任何事，都不能对他进行干扰，如果有更重要的事情需要他去做（如用户操作），也必须得等他上岸

Fiber架构就是为了解决这个问题。

看一下fiber架构 组建的渲染顺序

v2-d05d26726552a47b8d8c9aa3c306c6d9_hd.jpg

潜水员会每隔一段时间就上岸，看是否有更重要的事情要做。

加入fiber的react将组件更新分为两个时期

• phase 1

• phase 2

这两个时期以render为分界，

render前的生命周期为phase1,
render后的生命周期为phase2

phase1的生命周期是可以被打断的，每隔一段时间它会跳出当前渲染进程，去确定是否有其他更重要的任务。此过程，React 在 workingProgressTree （并不是真实的virtualDomTree）上复用 current 上的 Fiber 数据结构来一步地（通过requestIdleCallback）来构建新的 tree，标记处需要更新的节点，放入队列中。

phase2的生命周期是不可被打断的，React 将其所有的变更一次性更新到DOM上。

这里最重要的是phase1这是时期所做的事。因此我们需要具体了解phase1的机制。

• 如果不被打断，那么phase1执行完会直接进入render函数，构建真实的virtualDomTree
• 如果组件再phase1过程中被打断，即当前组件只渲染到一半（也许是在willMount,也许是willUpdate~反正是在render之前的生命周期），那么react会怎么干呢？ react会放弃当前组件所有干到一半的事情，去做更高优先级更重要的任务（当然，也可能是用户鼠标移动，或者其他react监听之外的任务），当所有高优先级任务执行完之后，react通过callback回到之前渲染到一半的组件，从头开始渲染。（看起来放弃已经渲染完的生命周期，会有点不合理，反而会增加渲染时长，但是react确实是这么干的）

看到这里，相信聪明的同学已经发现一些问题啦~

也就是 所有phase1的生命周期函数都可能被执行多次，因为可能会被打断重来

这样的话，就和react16版本之前有很大区别了，因为可能会被执行多次，那么我们最好就得保证phase1的生命周期每一次执行的结果都是一样的，否则就会有问题，因此，最好都是纯函数。

（所以react16目前都没有把fiber enable，其实react16还是以 同步的方式在做组建的渲染，因为这样的话，很多我们用老版本react写的组件就有可能都会有问题,包括用的很多开源组件，但是后面应该会enable,让开发者可以开启fiber异步渲染模式~）

对了，程墨大神还提到一个问题，饥饿问题，即如果高优先级的任务一直存在，那么低优先级的任务则永远无法进行，组件永远无法继续渲染。这个问题facebook目前好像还没解决，但以后会解决~

所以，facebook在react16增加fiber结构，其实并不是为了减少组件的渲染时间，事实上也并不会减少，最重要的是现在可以使得一些更高优先级的任务，如用户的操作能够优先执行，提高用户的体验，至少用户不会感觉到卡顿~

作者：Evan_zhan
链接：https://www.jianshu.com/p/bf824722b496
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。