New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
浅入 React Fiber 及相关资料整理 #16
Comments
司徒正美的 React Fiber架构 |
Stack reconciler 自顶向下的递归 diff,这个过程无法中断(持续占用主线程),那么主线程上的layout、动画等周期性任务以及交互响应就无法立即得到处理。 Fiber reconciler 的思路是把渲染/更新过程(递归diff)按照时间分片拆分成一系列小任务,通过任务调度每次检查 fiber tree 上的一小部分,如有空闲时间则继续下一个任务,否则将暂停或终止执行任务,待主线程完成更高优先级任务后再继续。 fiber tree 即 Fiber 上下文的 vDOM tree,更新过程就是根据输入数据以及现有的 fiber tree 构造出新的fiber tree(workInProgress tree)。一些细致一点的概念如下:
|
Fiber reconciler1. render/reconciliation初次渲染的时候构建 fiber tree,后续state或props有变更,则以此为蓝本,以 fiber node 为工作单元,自顶向下逐节点构造 workInProgress tree(构建中的新fiber tree) 具体过程如下:
workloop 结束时,workInProgress tree 的根节点身上的 effect list 就是收集到的所有 side effect(因为每做完一个都向上归并),所以,构建 workInProgress tree 的过程就是 diff 的过程。 workInProgress tree 构造完毕,得到的就是新的 fiber tree,然后把 current 指针指向 workInProgress tree,丢掉旧的 fiber tree。这样做的好处:能够复用内部对象(fiber),节省内存分配、GC 的时间开销。 2. commit(该阶段不能打断)
任务调度diff 的粒度控制为一个fiber node,实际上就是按虚拟 DOM 节点拆,因为 fiber tree 是根据 v-DOM tree 构造出来的,树结构一模一样,只是节点数据信息有差异。 任务调度分两部分:工作循环 & 优先级机制。 工作循环是基本的任务调度机制,工作循环中每次处理一个任务(工作单元),处理完毕有一次喘息的机会,基本规则是:每个工作单元结束检查是否还有时间做下一个,没时间了就先“挂起” 优先级机制用来处理突发事件与优化次序。 中断/断点恢复
|
todo:
|
fiber 作为一种数据结构,用于代表某些 worker,换句话说,就是一个 work 单元,通过 Fiber 的架构,提供了一种跟踪,调度,暂停和中止工作的便捷方式。
react fiber 及未来
异步渲染 Dan 提出的异步渲染的概念,异步渲染即在以异步的方式加载的同时给人以同步流程的体验,在老设备上,通过牺牲一些加载时间来获得一种流畅的体验。其实在 React@16 版本中,异步渲染默认是关闭的。
生命周期变更 在 react@16 版本中,虽然依旧支持之前的生命周期函数,但是官方已经说明在下个版本中会将废弃其中的部分,这么做的原因,主要是 reconciliation 的重写导致。在 render/reconciliation 的过程中,因为存在优先级和时间片的概念,一个任务很可能执行到一半就被其他优先级更高的任务所替代,或者因为时间原因而被终止。当再次执行这个任务时,是从头开始执行一遍,就会导致组件的某些 xxxwill 生命周期可能被多次调用而影响性能。
react@16 与其说是一个分水岭,不如说是一个过渡,react@17 才会是掀起风浪的那一个。
The text was updated successfully, but these errors were encountered: