1
0
Fork 0
Browse Source

vault backup: 2022-04-16 15:49:45

master
YuJian920 3 years ago
parent
commit
0a0225fc01
  1. 2
      React 的源码深入/React Reconciler - Fiber 创建.md
  2. 2
      自顶向下学 React 源码/React 源码的碎片记录.md

2
React 的源码深入/React Reconciler - Fiber 创建.md

@ -50,7 +50,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
### appendAllChildren ### appendAllChildren
函数首先会判断 WorkInProgress 的 child 属性是否为空,如果不为空就进入 while 循环,因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件,不会存在 child 属性,所以会跳过循环,也就会跳过插入逻辑,回到 completeWork 的调用栈中 函数首先会判断 WorkInProgress 的 child 属性是否为空,如果不为空就进入 while 循环,因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件,不会存在 child 属性,所以会跳过循环,也就会跳过插入逻辑,回到 completeWork 的调用栈中
然后回到 completeWork 的调用栈,它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中, 然后回到 completeWork 的调用栈,它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中,然后会调用 inalizeInitialChildren ,这个函数会为创建的 DOM 元素,插入已有的 props,内部也根据 Fiber 节点的 tag 区分不同的处理逻辑,还有对 props 是否合法的校验,甚至根据 props 的属性也做了不同逻辑的处理,最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑,这个函数会把
### 第一次触发更新 ### 第一次触发更新

2
自顶向下学 React 源码/React 源码的碎片记录.md

@ -22,7 +22,7 @@
- mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的,只是传入的布尔值会不同,而这个参数表示是否追踪副作用,mountChildFibers 为 false,reconcileChildFibers则相反 - mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的,只是传入的布尔值会不同,而这个参数表示是否追踪副作用,mountChildFibers 为 false,reconcileChildFibers则相反
- 以 reconcileChildFibers 为例,会对 Children 的类型做判断,对判断结果分别做相应操作 - 以 reconcileChildFibers 为例,会对 Children 的类型做判断,对判断结果分别做相应操作
- completeWork 会对 beginWork 创建好的 Fiber 进行填充,根据 Fiber 类型的不同有不同的处理逻辑,其中有一步就是创建真实 DOM 元素并将之前创建好的 DOM 元素插入 - completeWork 会对 beginWork 创建好的 Fiber 进行填充,根据 Fiber 类型的不同有不同的处理逻辑,其中有一步就是创建真实 DOM 元素并将之前创建好的 DOM 元素插入
- finalizeInitChildren 为创建的 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 那么就能渲染剩下的全部内容
- createWorkInProgress 会创建新的 WorkInProgress Fiber,会根据 current Fiber 的 alternate 属性检查是否已经存在 WorkInProgress Fiber,如果没有会通过 createFiber 创建新的 Fiber 并将 current Fiber 的已有属性进行赋值,最后让 WorkInProgress Fiber 的 alternate 属性进行双向链接 - createWorkInProgress 会创建新的 WorkInProgress Fiber,会根据 current Fiber 的 alternate 属性检查是否已经存在 WorkInProgress Fiber,如果没有会通过 createFiber 创建新的 Fiber 并将 current Fiber 的已有属性进行赋值,最后让 WorkInProgress Fiber 的 alternate 属性进行双向链接

Loading…
Cancel
Save