|
|
|
@ -54,7 +54,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
@@ -54,7 +54,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
|
|
|
|
|
然后回到 completeWork 的调用栈,它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中,然后会调用 inalizeInitialChildren ,这个函数会为创建的 DOM 元素,插入已有的 props,内部也根据 Fiber 节点的 tag 区分不同的处理逻辑,还有对 props 是否合法的校验,甚至根据 props 的属性也做了不同逻辑的处理,最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑,这个函数会把 Fiber 打上 Update 标记 |
|
|
|
|
最后再执行 bubbleProperties 进行一些处理,~~不谈~~ 整个 completeWork 的流程就走完了 |
|
|
|
|
|
|
|
|
|
### 第一次触发更新 |
|
|
|
|
## 第一次触发更新 |
|
|
|
|
|
|
|
|
|
### createWorkInProgress |
|
|
|
|
|
|
|
|
@ -70,9 +70,10 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
@@ -70,9 +70,10 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
|
|
|
|
|
|
|
|
|
|
最后返回到 bailoutOnAlreadyFinishedWork 在由它返回到 beginWork,beginWork 流程执行结束 |
|
|
|
|
|
|
|
|
|
### 第二次触发更新 |
|
|
|
|
## 第二次触发更新和后续触发更新 |
|
|
|
|
|
|
|
|
|
### createWorkInProgress |
|
|
|
|
第一步很熟悉,有了前面两次执行的流程可以cai'dao |
|
|
|
|
第一步很熟悉,有了前面两次执行的流程可以猜到,第二次触发更新也是进入这个函数,那么这次执行和之前有什么不同吗?并没有,和第一次触发更新的时候一模一样,但是在这一次更新,React 的运行时终于拥有了两颗完整的 Fiber 树 |
|
|
|
|
|
|
|
|
|
### 后续触发更新 |
|
|
|
|
|
|
|
|
|
你可以会问我,到这里就没有了吗? |