理解React Fiber

发表于 | 分类于 | 阅读次数：

React 渲染时的问题

当组件比较大时, js的执行会占用主线程时间, 此时对动画和手势会出现响应变差.
针对这个问题React, 对核心算法 reconciliation 进行了重写 -> Fiber.

以下图片形象说明了stack reconciler 和 fiber reconciler在渲染上的差别

Fiber-tree 是一个单链表树结构

在stack reconciler 下React 会创建以下几种实例

fiber reconciler 中会创建以下实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
DOM
    真是DOM节点
------
effect
    每个workInProgress tree 节点上都有一个effect list
    用于存放diff的结果
    当前节点更新完毕后会向上merge effect list, 此时queue会收集diff结果
- - - -
workInProgress
    workInProgress tree是reconcile过程中从fiber tree建立的当前进度快照, 用于断点恢复
- - - -
filber
    fiber tree 和 vDOM tree类似, 用来描述增量更新所需的上下文信息, fiber结构如下
    {
        stateNode, // 管理Instance 自身的特性
        child, // 当前节点的孩子节点
        return, // 表示处理完成后返回结果所要合并的目标, 通常指向父节点
        sibling, // 当前节点的下一个兄弟节点
        ...
    }
------
Elements
    描述UI长什么样子
    {
        type,
        props,
        children
    }

参考文章

https://juejin.im/post/5ab7b3a2f265da2378403e57
https://juejin.im/entry/5b9885496fb9a05cf3711471
https://raphamorim.io/understanding-react-fiber-incremental-rendering-feature/