React源码学习:Fiber 架构
Fiber架构工作原理(P39)
新旧架构对比
- 旧版存在的问题
- 新版的解决方案
Fiber是什么
- Fiber是React16的DOM比对的新的算法
- Fiber就是这个diff算法的名字(以前比对算法的名字叫 Stack)
React 设计理念
- 代数效应 与 React 观念
- 用于将副作用从函数中分离,在React中的实现就是 hook
Fiber纤程
可以理解为一种协程的实现。
generator 也是 js 对协程的一种实现。
- js 中已经有
generator
,为什么不采纳 - 看看作者的解释吧 https://github.com/facebook/react/issues/7942
Fiber要求
- 无副作用
- 优先级调 度(
generator
无法实现)
React 15 的协调器
- 采用递归的方式执行
- 数据在递归的调用栈中
- 所以,他的
Reconciler
称为 Stack Reconciler
React 16+
- 基于 Fiber 节点实现的
- 称为 Fiber Reconciler
三层含义
- 作为 Filber架构
- 作为静态数据节点
- 作为动态工作单元
Fiber 用遍历的方式代替递归
- 所以这里用
return
表示parent
- 遍历:链表的遍历
xx.next
这种方式 - 方便中断,继续操作
- 如果是递归:就得重建
stack
,会比较消耗时间
Filber 源码
- /Users/aric.zheng/github/react/packages/react-reconciler/src/ReactFiber.old.js
双缓存
为了防止渲染延时,React用了一种在内存中构建并替换下一zhen的技术称为双缓存技术
什么是 ReactFiber
- Fiber 是一个 JS对象
- Fiber reconciler:当前的React reconciler 就是基于 Fiber 架构实现的(React > 16)
Filter 专注于动画 和 响应式
- 分割 work 成 chunks 和 不同优先级的任务
- 可以暂停 和 恢复执行任务
- 很方便的:重用或者删除不需要的部分
- Fiber 是异步的:
asynchronous
requestAnimationFrame
: 优先级高的任务requestIdleCallback
: 优先级低的任务
先看一下 Old Reconciler: stack
- 原来的是:synchronous 同步的
- 并且是像一个 stack(递归Stack)
- Hard to work untial “stack” was empty:这个不太理解
- 如果有几个任务同时处理的时候,就会出现有部分任务被卡住
- 卡住(Hard to work)
- 原因就出在:Stack was sync and that was a problem
2个阶段
- render (processing) - async
- task 可以被设置优先级
- task 可以暂停
- task 可以被删除
- …
- 对应 React中的实现就是2个方法: beginWork/completeWork
- commit(finish) - sync
- 这里执行的就是 commitWork
- 这个阶段是同步执行的 sync
- 不可以被中断的
Fiber 的一些常用属性
- type: 24 种
- stageNode
- key
另一类属性
用链表的方式组织成tree
- child(这里一定不是children,因为是链表)
- sibling
- return
总结一下
- tree 的方式 fibers
- fiber = unit of work
- filber 分2个阶段处理
- render: 异步
- commit: 同步
优先级调度
- requestAnimationFrame
- scheulders 高优先级的函数
- requestIdleCallback
- 调度低优先级的函数
- polyfill,这种针对低级浏览器的方案(估计是 idleCallback,因为requetsAnimation兼容性比较好)
FiberTree
- Current Tree
- WorkInProgressTree
Effects
- dom操作
- fetch/ajax 请求
- 重度依赖于于 filber的
- ClassComponent,生命周期方法
React 处理一个 FiberTree
- 什么是深度优先
- 先处理 child
- 再处理 sibling
- 最后 return(parent)
- child + sibling + return 搞定遍历过程
react fiber怎样实现任务中断和恢复的?
fiber tree
是一种数据结构, 每个fiber
节点就是一个工作单元。
每个fiber会做三件事:
- 给DOM添加element
- 为element的children创建fiber
- 选择执行下一个单元工作
这种数据结构的目标之一是使查找下一个工作单元变得容易。
因为一个更新fiber tree过程可能被打断,所以React Fiber一个更新过程被分为两个阶段(Phase):
- 第一个阶段Reconciliation Phase和第二阶段Commit Phase。Reconciliation 阶段React Fiber会找出需要更新哪些DOM, 是可以被打断的,
- 但是到了第二阶段Commit Phase ,那就一鼓作气把DOM更新完,绝不会被打断。
关于具体的实现,推荐看 Build your own React