mini-react 训练营 总结

首先先说收获吧:

1. 对于 React 的使用, 以及其更新的流程有了大概的了解, 比如 双缓存, 怎么将ReactElement 转换成 fiber, 怎么开始 一个一个处理fiber
2. 对于某些抽象的数据的结构, 能用画图来将结构具象化, 有利于我们分析
3. 带有目的性的学习有利于自己快速过滤掉打扰我们的东西? 比如实现某个功能, 出版只需要体现出自己的思路, 不需要去纠结代码的复杂
4. 对 DPS 的使用更加熟练

其实写完之后如果没有这门训练营, 我会怎么去实现一个 mini-react呢? 估计个屁

对于 fiber 的理解

首先我们要知道 为啥需要 fiber 这样的新的数据结构, 其实就是 ReactElement(React.createElement返回的) 无法满足, 因为我们需要

1. 介于 ReactElement 和 真实 DOM 之间
2. 能够表达 节点与节点 之间的关系
3. 方便拓展

作为存储单元

• 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

最后

回头源码接着看, 加油