【第十一期】React Fiber

React Fiber 是什么

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

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

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

React Fiber 怎么做的

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

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

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

最后

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180205G1EZHE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券