深入理解React16之:(一).Fiber架构

1字数 1502阅读 13991

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结构,其实并不是为了减少组件的渲染时间,事实上也并不会减少,最重要的是现在可以使得一些更高优先级的任务,如用户的操作能够优先执行,提高用户的体验,至少用户不会感觉到卡顿~

推荐阅读更多精彩内容