From f8904c492992c30c8254a58fbde33d9e0ba208ab Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 19 Apr 2022 17:15:48 +0800 Subject: [PATCH] vault backup: 2022-04-19 17:15:48 --- React 的源码深入/Fiber 数据结构.md | 10 ++++++++++ .../React 源码的碎片记录.md | 10 ---------- 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 React 的源码深入/Fiber 数据结构.md diff --git a/React 的源码深入/Fiber 数据结构.md b/React 的源码深入/Fiber 数据结构.md new file mode 100644 index 0000000..54b2415 --- /dev/null +++ b/React 的源码深入/Fiber 数据结构.md @@ -0,0 +1,10 @@ + Fibet 中的 tag 属性保存了组件类型，如 Function Component、Class Component +- Fiber 中的 type 属性在使用 Function Component 时是函数本身，Class Component 时是 Class，Host Component 时是 DOM 节点的 Tag Name +- Fiber 中的 stateNode 属性对于 Host Component 而言，是它的真实 DOM 节点 +- Fiber 中的 return、child、sibling 属性则对应链接Fiber链表中的父节点、子节点和兄弟节点 +- Fiber 中的 index 属性代表在多个同级 Fiber 节点中，它们插入的位置索引 +- Fiber 中带有 effcet 名称的属性代表与副作用相关，Host Component 中的 DOM 的增删改查，Functuon 中的 useEffect、useLayoutEffect +- Fiber 中的 lanes 属性和 childLanes 属性与 Fiber 的优先级的调度有关 +- Fiber 中的 alternate 属性则表示了 Fiber 的工作方式 + +`elementType` : 在大部分时候和 `type` 是相同的，在 FunctionComponent 使用 `React.memo` 会有不同 \ No newline at end of file diff --git a/自顶向下学 React 源码/React 源码的碎片记录.md b/自顶向下学 React 源码/React 源码的碎片记录.md index a5c55a1..bfcc92e 100644 --- a/自顶向下学 React 源码/React 源码的碎片记录.md +++ b/自顶向下学 React 源码/React 源码的碎片记录.md @@ -1,15 +1,5 @@ -# React 源码的碎片记录 - 每一个 Fiber 节点都会链接它的第一个子节点、下一个兄弟节点和父节点，并且在 Fiber 节点中还会保存组件的状态和需要更新的副作用 - Reconciler 会从根节点一直向下递到子节点，再从子节点一路向上归到根节点 -- Fibet 中的 tag 属性保存了组件类型，如 Function Component、Class Component -- Fiber 中的 elementType 和 type 属性在大部分时候时相同，但是在 Function Component 使用React.memo 包裹时会有不同 -- Fiber 中的 type 属性在使用 Function Component 时是函数本身，Class Component 时是 Class，Host Component 时是 DOM 节点的 Tag Name -- Fiber 中的 stateNode 属性对于 Host Component 而言，是它的真实 DOM 节点 -- Fiber 中的 return、child、sibling 属性则对应链接Fiber链表中的父节点、子节点和兄弟节点 -- Fiber 中的 index 属性代表在多个同级 Fiber 节点中，它们插入的位置索引 -- Fiber 中带有 effcet 名称的属性代表与副作用相关，Host Component 中的 DOM 的增删改查，Functuon 中的 useEffect、useLayoutEffect -- Fiber 中的 lanes 属性和 childLanes 属性与 Fiber 的优先级的调度有关 -- Fiber 中的 alternate 属性则表示了 Fiber 的工作方式 - React 的双缓存：React 有着 current Fiber 树和存在于内存中的 workInProgress Fiber 树 - React 的双缓存：每一次 React 的更新都会创建一个 workInProgress Fiber 树，current Fiber 和 workInProgress Fiber 之间使用 alternate 属性链接，方便公用属性，当 workInProgress Fiber 完成渲染，FiberRootNode 的指针就会指向 workInProgress Fiber 树的根节点 RootFiber，这时 workInProgress Fiber 就变成了 current Fiber 树 - React 会尽量的复用 Fiber，在创建 workInProgress Fiber 时，如果 current Fiber 中节点的 alternate 属性已经指向一个 Fiber 节点，那么新创建的 workInProgress Fiber 节点就会基于这个 alternate 指向的 Fiber 节点来创建，这种基于已有 Fiber 节点做对比生成新的 workInProgress Fiber 的过程就是 diff 算法，所以首屏渲染和更新渲染最大的区别就在于是否有 diff 算法