作者:xieyu
React 中 state render 到 html dom 的流程分析Questions
React 的 component的 lifecycle 在 react 中是怎么被调到的.
分析 jsx => element tree => fiber tree => html dom 在 react 中的流程.
react 中的 fiber tree 的建立和执行, 以及异步的 schedule.
研究工具和方法
chrome debug 打断点
ag the silver searcher, 源代码全局搜索.
猜测它的实现原理,打 log, call trace 验证, console.log, console.trace;
准备工作
代码下载,编译
Component lifeCycle callback
准备最简单的组件
在 , , , 中打个断点
创建 html dom 的 callstack
react中最后一定会去调用 去创建 html 的 dom 节点,所以把 这个方法覆盖了,加了一层 log.
然后打断点,得到的 callstack 如下:
call flow 整理
函数间的 callflow 整理如下
函数所属模块之间的 call flow 整理如下
Fiberfiber 的设计思想
在 react-fiber-artchitecture 中作者描述了 fiber 的设计思想,简单来说,每个 fiber 就是一个执行单元,可以任意的修改它的优先级,可以 pause 它,之后再继续执行(感觉很像进程线程的概念)。
实际中执行一个 fiber 可以生成下一步要执行的 fiber,然后 fiber 执行之前可以检查时候 js 跑的时间时候用完了,如果用完了,就挂起来,等待下次 requestIdleCallback/requestAnimationFrame 的 callback, schedule 开始接着上次结束的地方继续执行 js code.
相当于把以前的 js function 的 call stack 改成 fiber chain 了。
函数主要逻辑如下(注,删除了错误处理和其他不相干的 分支) performWork
schedule
schedule 有同步和异步的,同步的会一直执行,直到 fiber tree 被执行结束,不会去检查 time 限制和 priorityLevel 的问题,异步的有两类权限,一个是 animation 的,一类是 HighPriority, OffScreen Priority 这个会有个 deadline.
在 preformwork 的末尾会去检查 的优先权,然后根据优先权异步的 schedule.
fiber类型
FunctionalComponent, ClassComponent 对应着用户创建的 Component, HostRoot, HostComponent, HostPortal, HostText 这些是和平台相关的组件。对于 web 来说就是 div, span 这些 dom 元素了。
fiber 执行的三个阶段
中的 执行的执行主要分为三个阶段
: fiber 展开(把ClassComponent render 开来,最后展开到 fiber tree 的叶子节点都是 hostComponent)
: 计算 fiber 之间的 diff, 底层的 dom 元素的创建,以及 dom tree 的建立,还有事件绑定。
: 调用 host 接口,把 fiber 的 diff 更新到 host 上去
begin work: fiber tree 的展开
每次的 beginWork(fiber), 会把 fiber 的所有直接子节点展开(这里只展开一层, 不会递归的去展开子节点的子节点)
在 workloop 里面会把 beginWork 创建的子节点接着传给 beginWork,继续展开 fiber tree
`
completeWork 创建 dom 元素,计算 diff
创建的 (对于 html 来说,就是 dom 节点), 存储在 里面, 计算好的 props diff 存放在了 ,在下一个阶段 commitWork 会把这个 updateQueue 里面的 patch 提交到 host。
commitWork 提交 diff
在 中取 , 然后调用 Dom 操作把 diff apply 上去
本文来自企鹅号 - justjavac媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - justjavac媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。