YuJian
/
Obsidian_Note
1
0
Fork 0
Code Releases Activity
Browse Source

vault backup: 2022-05-09 17:15:00

master
YuJian 3 years ago
parent
31d70930bc
commit
37c3cb4587
2 changed files with 1 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md
  2. 1
      自顶向下学 React 源码/React 源码的碎片记录.md

2
React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md
Unescape View File

@ -11,7 +11,7 @@ function beginWork(current, workInProgress, renderLanes) {
} }
``` ```
beginWork 函数接受三个参数，分别是 current 节点，workInProgress 节点和 renderLanes 优先级，在进入主要函数逻辑 switch 之前，会先对 current 节点进行空值判断， beginWork 函数接受三个参数，分别是 current 节点，workInProgress 节点和 renderLanes 优先级，在进入主要函数逻辑 switch 之前，会先对 current 节点进行空值判断，如果 current 节点不存在则表示在上一次的渲染当中不存在当前节点
### beginWork ### beginWork

1
自顶向下学 React 源码/React 源码的碎片记录.md
Unescape View File

@ -6,7 +6,6 @@
- 对于首屏渲染来说，只有根节点具有 current Fiber 而子节点不存在 - 对于首屏渲染来说，只有根节点具有 current Fiber 而子节点不存在
- React render 阶段的工作分为归阶段和递阶段，在递阶段执行 beginWork，而在归阶段，执行 completeWork - React render 阶段的工作分为归阶段和递阶段，在递阶段执行 beginWork，而在归阶段，执行 completeWork
- 如果 render 的递归阶段，如果节点只存在一个文本子节点，那么这个子节点将不会进入 beginWork 递阶段，而是由它父节点直接进入 completeWork 归阶段，这是 React 做的一个优化，而这一个逻辑在 updateHostComponent方法中的 isDirectTextChild 可以看到 - 如果 render 的递归阶段，如果节点只存在一个文本子节点，那么这个子节点将不会进入 beginWork 递阶段，而是由它父节点直接进入 completeWork 归阶段，这是 React 做的一个优化，而这一个逻辑在 updateHostComponent方法中的 isDirectTextChild 可以看到
- Host Components 会进入 updateHostComponent 逻辑，在 React 18 是 updateHostComponent$1
- updateHostComponent 方法中的 reconcileChildren 方法会为当前 Fiber 节点创建它的子 Fiber 节点，也就是 Fiber 中的 child 属性 - updateHostComponent 方法中的 reconcileChildren 方法会为当前 Fiber 节点创建它的子 Fiber 节点，也就是 Fiber 中的 child 属性
- reconcileChildren 方法接受 current 参数，通过判断这个参数是否为 null，分别执行 mountChildFibers 或 reconcileChildFibers 方法 - reconcileChildren 方法接受 current 参数，通过判断这个参数是否为 null，分别执行 mountChildFibers 或 reconcileChildFibers 方法
- mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的，只是传入的布尔值会不同，而这个参数表示是否追踪副作用，mountChildFibers 为 false，reconcileChildFibers则相反 - mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的，只是传入的布尔值会不同，而这个参数表示是否追踪副作用，mountChildFibers 为 false，reconcileChildFibers则相反

Write Preview
Loading…
Cancel
Save