即将在 React V16 版本迎来的 React Fiber 到底意味着什么

@GuoYongfeng 2017-03-30 00:47:00发表于 iuap-design/blog

从2017年初到3月13号举办的React Conf 2017大会,不断的提及 React Fiber 相关的一切。

前言

对于还在忙于产品开发和使用方式研究的同学而言,对于国内的同学在争论使用 Vue 好还是 React 好的时候,React Fiber 的研究在两年前就已经启动了。而正好,经过持续的测试,即将在 React V16版本和我们见面了。那么目前的情况是什么样的呢:

image

什么是 React Fiber

对于普通开发者而言,React Fiber 的出现对于你的日常开发工作整体影响不大,通俗的说,就是出现了一个新的架构或算法实现,将替换目前的 DOM Diff 算法,内置于 React 中从而实现更高级的性能优化。

等新版 React 出来之后,你把新的包引入,然后能够感受UI渲染的性能提升了,除此就没有感知了。

不过,如果你不了解一些整体的来龙去脉,对后续写组件和做性能分析都是有影响的,做开发就应该掌握的更通透一些,对吧。

基本原理

分片优化

React Fiber把更新过程碎片化,维护每一个分片的数据结构,就是Fiber。分片是比进程(Thread)控制的更细的线,也就是比线程(Thread)控制得更精密的并发处理机制。

image

提前使用

yarn add react@next react-dom@next

更多使用细节不敢不多,毕竟还未正式发布,能够确定的是,新版的 React 对于组件的写法需要更多的关注组件生命周期相关的几个方法的使用,如componentWillMount和componentWillUpdate这两个函数。

相关