React16.2源码解析-Fiber架构

[UNDERCOVERj]

什么是fiber

所谓fiber，它其实是一个react中的架构，一个 fiber 对象代表了一个work单位

优化渲染任务，让一个大组件细化，从同步变成异步，让渲染任务有了优先级。生命周期函数调用不再是同步的，让用户能感知的性能提高了。

fiber可以把很大的工作分成一个个小块（trunk），trunk之间是异步的，每个trunk之间可以执行别的操作。

以render函数为界，分为两个阶段，在render之前改变 workInProgress tree，执行生命周期函数比如componentWillMount，componentWillReceiveProp。在render函数之后，执行componentDidMount， componentDidUpdate。在第一个阶段，可能被中断。

优势

1. 当处理 ui 时，如果很多 work 突然运行，可以使动画帧下降。fiber 被视为 virtual stack frame ，能定制调用栈优化行为，并能随意中断调用堆栈和手动操作堆栈帧。

特性

1. 在更新过程中能暂停、中断、重用 work
2. 为更新队列安排优先级
3. 异步基元

结构

fiber是一个JavaScript对象，其中包含组件及组件的输入输出等信息，它也对应于一个组件的一个实例

图解 fiber 对象

fiber的属性及意义

1. type，tag，key

fiber的type和key就像它们在React 元素中的作用一样。

type描述它对应的组件，可为 f App() {}，'div'等。type 在 ClassComponent 创建实例时能用到

var ctor = workInProgress.type;
var instance = new ctor(props, context);

tag为 type 对应组件类型的值可以为构造函数（FunctionalComponent）或类组件（ClassComponent）或者html 标签 HostComponent

key在reconciliation 阶段决定如何重用 fiber

2. child 和 sibling

这两个属性指向其他fiber，描述一个fiber的递归树结构

child对应一个 fiber.props.children 中的第一个 childFiber

在render方法返回的多元children时，child形成一个list，头指针指向第一个孩子fiber 节点，则child的sibling就是第一个孩子fiber 几点的兄弟 fiber 节点

function Parent() {
  return [<Child1 />, <Child2 />]
}

以上代码，Parent的child为Child1，Child1的sibling就为Child2

3. return

return fiber是处理workInProgress后返回的fiber，被视为parent fiber

4. pendingProps和memoizedProps

props是应一个函数的参数。在fiber中，pendingProps在它执行之前被设置, memoizedProps在它执行之后被设置

当即将到来的pendingProps和memoizedProps相同，标志着fiber之前的输出能被重用,避免了不必要的工作

5. alternate

work-in-progress阶段：fiber 只是current fiber 的代替物

current fiber的alternate是workInProgress ，workInProgress的alternate是current

6. stateNode

在fiberRoot中stateNode指向root，是一个循环对象，在root.current.alternate下的fiber中的stateNode则是每个fiber对应的dom或者 instance

fiber与dom及instance的对应关系

1. 如何从 dom 中找到 fiber

dom 元素中有以 __reactInternalInstance 开头的属性，此属性即指向dom 对应的 fiber

var internalInstanceKey = '__reactInternalInstance$' + randomKey;

function getInstanceFromNode$1(node) {
    var inst = node[internalInstanceKey];
    if (inst) {
        if (inst.tag === HostComponent || inst.tag === HostText) {
            return inst;
        } else {
            return null;
        }
    }
    return null;
}

2. 如何从组件的实例中取得 fiber

从思维导图中可以看到，如果stateNode 为组件实例 instance ，则其中有_reactInternalFiber 属性，指向该组件的 fiber

function get(key) { // 得到instance的fiber
    return key._reactInternalFiber;
}

3. 如何得到fiber对应的dom

如果fiber.tag === HostComponent，即fiber 是div、span 等 html 元素类型，则该fiber的stateNode指向的就是具体的 dom节点

如何创建fiber

创建时 fiber 的 tag 有如下 11 种类型

var IndeterminateComponent = 0; // Before we know whether it is functional or class
var FunctionalComponent = 1;
var ClassComponent = 2;
var HostRoot = 3; // Root of a host tree. Could be nested inside another node.
var HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
var HostComponent = 5;
var HostText = 6;
var CallComponent = 7;
var CallHandlerPhase = 8;
var ReturnComponent = 9;
var Fragment = 10;

最基础的创建 fiber 的方法是 createFiber ，传入 tag、key、internalContextTag，返回 FiberNode 实例

reference

1. https://github.com/acdlite/react-fiber-architecture
2. https://tech.youzan.com/react-fiber/