1
0
Fork 0
Browse Source

vault backup: 2022-04-19 17:25:48

master
YuJian 3 years ago
parent
commit
6f7c61839a
  1. 23
      React 的源码深入/Fiber 数据结构.md

23
React 的源码深入/Fiber 数据结构.md

@ -1,9 +1,10 @@
- Fiber 中的 return、child、sibling 属性则对应链接Fiber链表中的父节点、子节点和兄弟节点
- Fiber 中的 index 属性代表在多个同级 Fiber 节点中,它们插入的位置索引
- Fiber 中带有 effcet 名称的属性代表与副作用相关,Host Component 中的 DOM 的增删改查,Functuon 中的 useEffect、useLayoutEffect - Fiber 中带有 effcet 名称的属性代表与副作用相关,Host Component 中的 DOM 的增删改查,Functuon 中的 useEffect、useLayoutEffect
- Fiber 中的 lanes 属性和 childLanes 属性与 Fiber 的优先级的调度有关 - Fiber 中的 lanes 属性和 childLanes 属性与 Fiber 的优先级的调度有关
- Fiber 中的 alternate 属性则表示了 Fiber 的工作方式 - Fiber 中的 alternate 属性则表示了 Fiber 的工作方式
`tag` :
> 表示 Fiber 的类型,根据 ReactElement 组件的 `type` 生成
`elementType` : `elementType` :
> 大部分时候和 `type` 是相同的 > 大部分时候和 `type` 是相同的
> FunctionComponent 使用 `React.memo` 会有不同 > FunctionComponent 使用 `React.memo` 会有不同
@ -13,6 +14,22 @@
> ClassComponent 而言是 Class > ClassComponent 而言是 Class
> Host Component 而言是 DOM 节点的 Tag Name > Host Component 而言是 DOM 节点的 Tag Name
`key` :
> 和 ReactElement 的 key 属性一致
`stateNode` : `stateNode` :
> HostComponent 而言,是它的真实 DOM 节点 > HostComponent 而言,是它的真实 DOM 节点
> ClassComponent 时是 clsss 实例 > ClassComponent 而言是 clsss 实例
`return` :
> 指向父节点
`child` :
> 指向第一个子节点
`sibling` :
> 指向下一个兄弟节点
`index` :
> 代表在多个同级 Fiber 节点中,它们插入的位置索引
> 单节点默认为 0
Loading…
Cancel
Save