【第十一期】React Fiber

快一个礼拜没有更新公众号了，今天为大家带来的 React Fiber 的一个介绍。

React Fiber 是什么

React Fiber 是 React 16 引进的新功能。该功能基本对我们的开发没有任何的影响，但是很大程度的提高了应用整体的性能和体验。

Fiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染。

在 Fiber 之前，一旦 React 需要渲染界面，就会阻塞住主线程直到渲染完成。如果渲染需要一点时间并且这时候界面上有动画或者用户交互，就会出现卡顿的情况。在引入 Fiber 后，调度器会智能的管理帧，在不影响体验的情况下去分段计算更新。

React Fiber 怎么做的

对于如何区别优先级，React 有自己的一套逻辑。对于动画这种实时性很高的东西，也就是 16 ms 必须渲染一次保证不卡顿的情况下，React 会每 16 ms（以内） 暂停一下更新，返回来继续渲染动画。

对于异步渲染，现在渲染有两个阶段：调和和提交。在调和过程是可以打断的，后者不能暂停，会一直更新界面直到完成。

因为调和这个过程是可以打断的，所以在 React 16 中你可能会发现有些生命周期可能会执行多次。譬如对于 componentWillMount 来说，在 React 16 之前在这个生命周期请求数据不会有什么问题。但是在异步渲染的情况下，该生命周期函数可能会调用多次，由于异步请求是不能被打断的，所以可能会导致发送了多次请求。

最后

如果你看了文章还有任何的疑惑，都可以留言提问，我都会一一解答。

前端小知识，每天学一点。