React Fiber

Reference: (阿里团队)https://www.yuque.com/es2049/blog/nbp4xc#hxb7fb

原文:https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e

Fiber。

翻译的“协调”就是reconcile。这里觉得reconcile并不是很好进行直接翻译。

Fiber用的是链表结构。使用链表结构感觉比数组要节省空间一些。这里的链表结构是在reconcile开始的时候建立的。它的目的是找到存在副作用(side effect)的所有元素。

遍历线性列表比树快得多,并且没有必要在没有副作用的节点上花费时间。

React的createElement会带有一个$$typeof: Symbol(react.element)。这个属性是用来唯一标识react元素的属性。注意的是Symbol作为特殊类型的用法,它不会被任何==/===运算符影响,只能在和自身示例比对的时候返回true。

需要注意的是React维护两颗树,current树和workInProgress树。React自己实现的rIC是基于rAf的变种,它的执行效率和执行次数比原生的rIC要高很多。但是它的实现默认是33fps,这里可能对于某些场景不太够用。在超时之后,wIP树将会等待下一次的rIC的到来。

React 的核心原则之一是一致性。 React 总是一次性更新 DOM - 它不会显示部分中间结果。workInProgress 树充当用户不可见的「草稿」,这样 React 可以先处理所有组件,然后将其更改刷新到屏幕。

React 按照从子到父的顺序应用副作用。