diff --git a/React 的源码深入/Fiber 数据结构.md b/React 的源码深入/Fiber 数据结构.md index 54b2415..aec91bc 100644 --- a/React 的源码深入/Fiber 数据结构.md +++ b/React 的源码深入/Fiber 数据结构.md @@ -1,10 +1,18 @@ - 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 +`elementType` : +> 大部分时候和 `type` 是相同的 +> FunctionComponent 使用 `React.memo` 会有不同 + +`type` : +> FunctionComponent 而言是函数本身 +> ClassComponent 而言是 Class +> Host Component 而言是 DOM 节点的 Tag Name + +`stateNode` : +> HostComponent 而言,是它的真实 DOM 节点 +> ClassComponent 时是 clsss 实例