From 6f7c61839aac5673fbf6b5d7b4f48b33936615c5 Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 19 Apr 2022 17:25:48 +0800 Subject: [PATCH] vault backup: 2022-04-19 17:25:48 --- React 的源码深入/Fiber 数据结构.md | 23 ++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/React 的源码深入/Fiber 数据结构.md b/React 的源码深入/Fiber 数据结构.md index aec91bc..cae7d6e 100644 --- a/React 的源码深入/Fiber 数据结构.md +++ b/React 的源码深入/Fiber 数据结构.md @@ -1,9 +1,10 @@ -- Fiber 中的 return、child、sibling 属性则对应链接Fiber链表中的父节点、子节点和兄弟节点 -- Fiber 中的 index 属性代表在多个同级 Fiber 节点中,它们插入的位置索引 - Fiber 中带有 effcet 名称的属性代表与副作用相关,Host Component 中的 DOM 的增删改查,Functuon 中的 useEffect、useLayoutEffect - Fiber 中的 lanes 属性和 childLanes 属性与 Fiber 的优先级的调度有关 - Fiber 中的 alternate 属性则表示了 Fiber 的工作方式 +`tag` : +> 表示 Fiber 的类型,根据 ReactElement 组件的 `type` 生成 + `elementType` : > 大部分时候和 `type` 是相同的 > FunctionComponent 使用 `React.memo` 会有不同 @@ -13,6 +14,22 @@ > ClassComponent 而言是 Class > Host Component 而言是 DOM 节点的 Tag Name +`key` : +> 和 ReactElement 的 key 属性一致 + `stateNode` : > HostComponent 而言,是它的真实 DOM 节点 -> ClassComponent 时是 clsss 实例 +> ClassComponent 而言是 clsss 实例 + +`return` : +> 指向父节点 + +`child` : +> 指向第一个子节点 + +`sibling` : +> 指向下一个兄弟节点 + +`index` : +> 代表在多个同级 Fiber 节点中,它们插入的位置索引 +> 单节点默认为 0 \ No newline at end of file