React 07days

更新流程的步骤：

• 递：beginWork
• 归：completeWork

beginWork

对于如下结构的reactElement：

<A>
 <B/>
</A>

当进入A的beginWork时，通过对比B current fiberNode与B reactElement，生成B对应wip fiberNode。

在此过程中最多会标记2类与「结构变化」相关的flags：

• Placement

插入： a -> ab  
移动： abc -> bca

• ChildDeletion

删除： ul>li*3 -> ul>li*1

不包含与「属性变化」相关的flag：Update

<img title="鸡" /> -> <img title="你太美" />

实现与Host相关节点的beginWork

首先，为开发环境增加__DEV__标识，方便Dev包打印更多信息：

pnpm i -d -w @rollup/plugin-replace

HostRoot的beginWork工作流程

1. 计算状态的最新值
2. 创造子fiberNode

HostComponent的beginWork工作流程

1. 创造子fiberNode

HostText没有beginWork工作流程

因为他没有子节点

<p>唱跳Rap</p>

beginWork性能优化策略

考虑如下结构的reactElement：

<div>
 <p>练习时长</p>
 <span>两年半</span>
</div>

理论上mount流程完毕后包含的flags：

• 两年半 Placement
• span Placement
• 练习时长 Placement
• p Placement
• div Placement

相比于执行5次Placment，我们可以构建好「离屏DOM树」后，对div执行1次Placement操作

completeWork

需要解决的问题：

• 对于Host类型fiberNode：构建离屏DOM树
• 标记Update flag（TODO）

completeWork性能优化策略

flags分布在不同fiberNode中，如何快速找到他们？

答案：利用completeWork向上遍历（归）的流程，将子fiberNode的flags冒泡到父fiberNode