实现mount流程的beginWork

本节课代码地址（请参考课程获取） 更新流程的目的：

生成wip fiberNode 树

标记副作用flags 更新流程的步骤：

递：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