ReactFiber是什么

程墨Morgan

互联网研发老兵&＃xff0c;微信公众号morgansays&＃xff0c;《深入浅出React和Redux》作者

600 人赞同了该文章

使用React的同学们都应该要知道React Fiber&＃xff0c;因为这玩意快要正式发布了。

React Fiber这个大改变Facebook已经折腾两年多了&＃xff0c;刚刚结束不久的React Conf 2017会议上&＃xff0c;Facebook终于确认&＃xff0c;React Fiber会搭上React下一个大版本v16的顺风车发布。

在 Is Fiber Ready Yet? 这个网站上可以看到当前React Fiber的单元测试通过率&＃xff0c;我刚刚&＃xff08;北京时间2017年3月28日下午1:41&＃xff09;看到的是93.6%&＃xff0c;据说Facebook在自己的网站已经将React Fiber投入实战&＃xff0c;所以&＃xff0c;React Fiber大势所趋&＃xff0c;是时候了解一下React Fiber了。

React Fiber是个什么东西呢&＃xff1f;官方的一句话解释是“React Fiber是对核心算法的一次重新实现”。这么说似乎太虚无缥缈&＃xff0c;所以还是要详细说一下。

首先&＃xff0c;不用太紧张&＃xff0c;不要以为React Fiber的到来是一场大革命&＃xff0c;实际上&＃xff0c;对我们只是把React当做工具的开发者来说&＃xff0c;很可能感觉不到有什么功能变化。等到React v16发布的时候&＃xff0c;我们修改package.json中的react版本号&＃xff0c;重新npm install&＃xff0c;一切就搞定了&＃xff0c;然后我们就感觉到网页性能更高了一些&＃xff0c;如此而已。

当然&＃xff0c;上面说的是“理想情况”&＃xff0c;React Fiber对算法的修改&＃xff0c;还是会带来一些功能逻辑的变化&＃xff0c;后面会说。

为什么Facebook要搞React Fiber呢&＃xff1f;我们先要了解现在React&＃xff08;也就是直到目前最新的v15版本&＃xff09;的局限。

同步更新过程的局限

在现有React中&＃xff0c;更新过程是同步的&＃xff0c;这可能会导致性能问题。

当React决定要加载或者更新组件树时&＃xff0c;会做很多事&＃xff0c;比如调用各个组件的生命周期函数&＃xff0c;计算和比对Virtual DOM&＃xff0c;最后更新DOM树&＃xff0c;这整个过程是同步进行的&＃xff0c;也就是说只要一个加载或者更新过程开始&＃xff0c;那React就以不破楼兰终不还的气概&＃xff0c;一鼓作气运行到底&＃xff0c;中途绝不停歇。

表面上看&＃xff0c;这样的设计也是挺合理的&＃xff0c;因为更新过程不会有任何I/O操作嘛&＃xff0c;完全是CPU计算&＃xff0c;所以无需异步操作&＃xff0c;的确只要一路狂奔就行了&＃xff0c;但是&＃xff0c;当组件树比较庞大的时候&＃xff0c;问题就来了。

假如更新一个组件需要1毫秒&＃xff0c;如果有200个组件要更新&＃xff0c;那就需要200毫秒&＃xff0c;在这200毫秒的更新过程中&＃xff0c;浏览器那个唯一的主线程都在专心运行更新操作&＃xff0c;无暇去做任何其他的事情。想象一下&＃xff0c;在这200毫秒内&＃xff0c;用户往一个input元素中输入点什么&＃xff0c;敲击键盘也不会获得响应&＃xff0c;因为渲染输入按键结果也是浏览器主线程的工作&＃xff0c;但是浏览器主线程被React占着呢&＃xff0c;抽不出空&＃xff0c;最后的结果就是用户敲了按键看不到反应&＃xff0c;等React更新过程结束之后&＃xff0c;咔咔咔那些按键一下子出现在input元素里了。

这就是所谓的界面卡顿&＃xff0c;很不好的用户体验。

现有的React版本&＃xff0c;当组件树很大的时候就会出现这种问题&＃xff0c;因为更新过程是同步地一层组件套一层组件&＃xff0c;逐渐深入的过程&＃xff0c;在更新完所有组件之前不停止&＃xff0c;函数的调用栈就像下图这样&＃xff0c;调用得很深&＃xff0c;而且很长时间不会返回。

因为Javascript单线程的特点&＃xff0c;每个同步任务不能耗时太长&＃xff0c;不然就会让程序不会对其他输入作出相应&＃xff0c;React的更新过程就是犯了这个禁忌&＃xff0c;而React Fiber就是要改变现状。

React Fiber的方式

破解Javascript中同步操作时间过长的方法其实很简单——分片。

把一个耗时长的任务分成很多小片&＃xff0c;每一个小片的运行时间很短&＃xff0c;虽然总时间依然很长&＃xff0c;但是在每个小片执行完之后&＃xff0c;都给其他任务一个执行的机会&＃xff0c;这样唯一的线程就不会被独占&＃xff0c;其他任务依然有运行的机会。

React Fiber把更新过程碎片化&＃xff0c;执行过程如下面的图所示&＃xff0c;每执行完一段更新过程&＃xff0c;就把控制权交还给React负责任务协调的模块&＃xff0c;看看有没有其他紧急任务要做&＃xff0c;如果没有就继续去更新&＃xff0c;如果有紧急任务&＃xff0c;那就去做紧急任务。

维护每一个分片的数据结构&＃xff0c;就是Fiber。

有了分片之后&＃xff0c;更新过程的调用栈如下图所示&＃xff0c;中间每一个波谷代表深入某个分片的执行过程&＃xff0c;每个波峰就是一个分片执行结束交还控制权的时机。

道理很简单&＃xff0c;但是React实现这一点却不容易&＃xff0c;要不然怎么折腾了两年多&＃xff01;

对具体数据结构原理感兴趣的同学可以去看Lin Clark在React Conf 2017上的演讲 &＃xff08;要翻墙的&＃xff09;&＃xff0c;本文中的介绍图片也出自这个演讲。

为什么叫Fiber呢&＃xff1f;

大家应该都清楚进程&＃xff08;Process&＃xff09;和线程&＃xff08;Thread&＃xff09;的概念&＃xff0c;在计算机科学中还有一个概念叫做Fiber&＃xff0c;英文含义就是“纤维”&＃xff0c;意指比Thread更细的线&＃xff0c;也就是比线程(Thread)控制得更精密的并发处理机制。

上面说的Fiber和React Fiber不是相同的概念&＃xff0c;但是&＃xff0c;我相信&＃xff0c;React团队把这个功能命名为Fiber&＃xff0c;含义也是更加紧密的处理机制&＃xff0c;比Thread更细。

说个题外话&＃xff0c;很多年前&＃xff0c;我听一个前辈讲课&＃xff0c;他说到Fiber这么一回事&＃xff0c;我就问他&＃xff1a;怎么让我的程序进入可以操控Fiber的状态&＃xff1f;前辈的回答是&＃xff1a;你的程序真的需要用到Fiber吗&＃xff1f;如果现在的方法就能满足需求&＃xff0c;根本就不需要知道Fiber是什么东西。

呵呵&＃xff0c;前辈说的当时我还不大理解&＃xff0c;后来越来越觉得前辈说得有道理&＃xff0c;如果根本没有必要用上一样东西&＃xff0c;那就不用也罢&＃xff0c;不要因为那个东西酷就去用&＃xff0c;不然很可能就是自找苦吃。

扯远了&＃xff0c;我想说的是&＃xff0c;其实对大部分React使用者来说&＃xff0c;也不用深究React Fiber是如何实现的&＃xff0c;除非实现方式真的对我们的使用方式有影响&＃xff0c;我们也不用要学会包子怎么做的才吃包子对不对&＃xff1f;

但是&＃xff0c;React Fiber的实现改变还真的让我们的代码方式要做一些调整。

React Fiber对现有代码的影响

理想情况下&＃xff0c;React Fiber应该完全不影响现有代码&＃xff0c;但可惜并完全是这样&＃xff0c;要吃这个包子还真要知道一点这个包子怎么做的&＃xff0c;你如果不喜欢吃甜的就不要吃糖包子&＃xff0c;对不对&＃xff1f;

在React Fiber中&＃xff0c;一次更新过程会分成多个分片完成&＃xff0c;所以完全有可能一个更新任务还没有完成&＃xff0c;就被另一个更高优先级的更新过程打断&＃xff0c;这时候&＃xff0c;优先级高的更新任务会优先处理完&＃xff0c;而低优先级更新任务所做的工作则会完全作废&＃xff0c;然后等待机会重头再来。

因为一个更新过程可能被打断&＃xff0c;所以React Fiber一个更新过程被分为两个阶段(Phase)&＃xff1a;第一个阶段Reconciliation Phase和第二阶段Commit Phase。

在第一阶段Reconciliation Phase&＃xff0c;React Fiber会找出需要更新哪些DOM&＃xff0c;这个阶段是可以被打断的&＃xff1b;但是到了第二阶段Commit Phase&＃xff0c;那就一鼓作气把DOM更新完&＃xff0c;绝不会被打断。

这两个阶段大部分工作都是React Fiber做&＃xff0c;和我们相关的也就是生命周期函数。

以render函数为界&＃xff0c;第一阶段可能会调用下面这些生命周期函数&＃xff0c;说是“可能会调用”是因为不同生命周期调用的函数不同。

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

下面这些生命周期函数则会在第二阶段调用。

• componentDidMount
• componentDidUpdate
• componentWillUnmount

因为第一阶段的过程会被打断而且“重头再来”&＃xff0c;就会造成意想不到的情况。

比如说&＃xff0c;一个低优先级的任务A正在执行&＃xff0c;已经调用了某个组件的componentWillUpdate函数&＃xff0c;接下来发现自己的时间分片已经用完了&＃xff0c;于是冒出水面&＃xff0c;看看有没有紧急任务&＃xff0c;哎呀&＃xff0c;真的有一个紧急任务B&＃xff0c;接下来React Fiber就会去执行这个紧急任务B&＃xff0c;任务A虽然进行了一半&＃xff0c;但是没办法&＃xff0c;只能完全放弃&＃xff0c;等到任务B全搞定之后&＃xff0c;任务A重头来一遍&＃xff0c;注意&＃xff0c;是重头来一遍&＃xff0c;不是从刚才中段的部分开始&＃xff0c;也就是说&＃xff0c;componentWillUpdate函数会被再调用一次。

在现有的React中&＃xff0c;每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次&＃xff1b;在React Fiber中&＃xff0c;不再是这样了&＃xff0c;第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用&＃xff01;

使用React Fiber之后&＃xff0c;一定要检查一下第一阶段相关的这些生命周期函数&＃xff0c;看看有没有逻辑是假设在一个更新过程中只调用一次&＃xff0c;有的话就要改了。

我们挨个看一看这些可能被重复调用的函数。

componentWillReceiveProps&＃xff0c;即使当前组件不更新&＃xff0c;只要父组件更新也会引发这个函数被调用&＃xff0c;所以多调用几次没啥&＃xff0c;通过&＃xff01;

shouldComponentUpdate&＃xff0c;这函数的作用就是返回一个true或者false&＃xff0c;不应该有任何副作用&＃xff0c;多调用几次也无妨&＃xff0c;通过&＃xff01;

render&＃xff0c;应该是纯函数&＃xff0c;多调用几次无妨&＃xff0c;通过&＃xff01;

只剩下componentWillMount和componentWillUpdate这两个函数往往包含副作用&＃xff0c;所以当使用React Fiber的时候一定要重点看这两个函数的实现。

怎么试用React Fiber?

虽然React Fiber还没有正式发布&＃xff0c;现在你就可以试用React Fiber&＃xff0c;用这种方式安装react和react-dom

yarn add react&＃64;next react-dom&＃64;next

我试着将现有项目的React替换成React Fiber之后&＃xff0c;代码没有任何改变&＃xff0c;可以正常运行&＃xff0c;说明我的应用里生命周期函数应该没有假设只会被调用一次。

我相信当React Fiber正式发布的时候&＃xff0c;会有更清晰详尽的文档&＃xff0c;到时候我们再来详细介绍。

欢迎关注这个专栏 进击的React - 知乎专栏

更新&＃xff1a;我开了一个Live专门介绍Fibeer《深入理解React v16新功能》