|
|
|
@ -11,7 +11,6 @@ |
|
|
|
- finalizeInitialChildren 为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最终交由 setValueForProperty 处理 |
|
|
|
- finalizeInitialChildren 为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最终交由 setValueForProperty 处理 |
|
|
|
- completeWork 中的 appendAllChildren 会将创建好的真实DOM元素插入之前创建的子DOM元素 |
|
|
|
- completeWork 中的 appendAllChildren 会将创建好的真实DOM元素插入之前创建的子DOM元素 |
|
|
|
- 对于首屏渲染，只会有一个节点被打上 effectTag，就是根节点，只需要根节点被打上 effectTag 那么就能渲染剩下的全部内容 |
|
|
|
- 对于首屏渲染，只会有一个节点被打上 effectTag，就是根节点，只需要根节点被打上 effectTag 那么就能渲染剩下的全部内容 |
|
|
|
- 首屏渲染时，会创建 Fiber 树的第一个节点 FiberNode，这个时候创建的 Fiber 树会被 FiberRootNode 的 current 指针指向，之后进入 createWorkInProgress 函数，会从 current 树的 alternate 属性中获取 workInProgress 的 FiberNode，由于首屏渲染，这个时候只存在一棵树那就是 current Fiber，这时就会创建有个新的 Fiber 节点作为 workInProgress 的 FiberNode，并赋值 current FiberNode 的同名属性，最后交由 beginWork 开始创建子 Fiber 节点，直到 Fiber 树完成生成，提交给 commit 阶段渲染到页面上，当第一次触发页面刷新，也会进入 createWorkInProgress，这是存在一个完备的 Fiber 树，也就是首屏渲染时生成的 workInProgress，但是在第一次页面更新，它已经是此次的 current Fiber 树，与首屏渲染时的 createWorkInProgress 不同，这次的 current Fiber 树的 FiberNode 已经存在，那么就不会创建新的 Fiber 节点，而是复用已有的 FiberNode，并赋值上同名属性，最后再交由 beginWork生成子 Fiber 节点，最后逻辑依旧，完成 FIber 树的生成之后 commit 渲染出页面，直到第二次渲染，这时两棵树 current Fiber 树和 WorkInProgress 树都已经存在 |
|
|
|
|
|
|
|
- beginWork 在页面更新时，会根据一些条件判断 didReceiveUpdate 的 true 或者 false，这个变量代表了，在本次更新中这个 Fiber 节点是否有变化，这些条件分别是 |
|
|
|
- beginWork 在页面更新时，会根据一些条件判断 didReceiveUpdate 的 true 或者 false，这个变量代表了，在本次更新中这个 Fiber 节点是否有变化，这些条件分别是 |
|
|
|
1. 是否有新旧 props |
|
|
|
1. 是否有新旧 props |
|
|
|
2. context 是否发生变化 |
|
|
|
2. context 是否发生变化 |
|
|
|
|
YuJian
3 years ago