mini-react 训练营 总结
首先先说收获吧:
- 对于
React
的使用, 以及其更新的流程有了大概的了解, 比如双缓存
, 怎么将ReactElement
转换成fiber
, 怎么开始 一个一个处理fiber
- 对于某些抽象的数据的结构, 能用画图来将结构具象化, 有利于我们分析
- 带有目的性的学习有利于自己快速过滤掉打扰我们的东西? 比如实现某个功能, 出版只需要体现出自己的思路, 不需要去纠结代码的复杂
- 对
DPS
的使用更加熟练
其实写完之后如果没有这门训练营, 我会怎么去实现一个 mini-react
呢? 估计个屁
对于 fiber 的理解
首先我们要知道 为啥需要 fiber
这样的新的数据结构, 其实就是 ReactElement
(React.createElement返回的) 无法满足, 因为我们需要
- 介于 ReactElement 和 真实 DOM 之间
- 能够表达 节点与节点 之间的关系
- 方便拓展
作为存储单元
- tag 说明当前 fiberNode 的类型
- key 对应的 ReactElement 的 key
- stateNode 对于 HostRoot 来说, 对应的就是真实的 DOM
- type 对于 functionComponent 来说 就是那个 function
- return 指向的是 父级的 fiberNode
- sibling 指向自己的兄弟 fiberNode
- child 指向自己的 子 fiberNode
- index 父级中多个子 fiberNode 的下标
作为工作单元
- flags 保存对应的标记
- alternate 用于切换 current 与 workInProgress
双缓存
百度百科解释 其实就是维护两个缓冲区, 然后每次更新交替两个缓冲区.
对于 React
来说是怎么交替的呢? fiberRootNode.current
,
fiberRootNode 可以理解为 #root
生成的 fiberRootNode
, 这是一个特殊的 fiber
全局唯一, 然后全局其实存在两个 <App />
生成的链表 (可以理解为两个缓冲区), 两个链表通过 fiber.alternate
链接, 而 fiberRootNode.current
指向那个链表就是 当前的展示的缓冲区
那么双缓存解决了什么?
避免页面闪烁.
为啥会存在闪缩? 只渲染一部分, 后续的因为某些原因卡住, 页面也就展示渲染出的一部分, 然后恢复接着 append 后续, 就会出现闪烁, 当 fiberRootNode.current
切换时, 当时维护的缓冲区一定是一个符合的完整的最新的 DOM
最后
回头源码接着看, 加油