ReactContext
2024-05-03 10:44:13 2 举报AI智能生成
ReactContext原理
作者其他创作
大纲/内容
Context
一种直接访问祖先节点上的状态的方法，从而避免了多级组件层层传递 props`的频繁操作。
创建 Context
通过 React.createContext 创建 Context 对象
将初始值存储在 context._currentValue
创建 Context.Provider 和 Context.Consumer 对应的 ReactElement 对象
在 fiber 树渲染时，通过不同的 workInProgress.tag 处理 Context.Provider 和 Context.Consumer 类型的节点。
消费Context
直接使用 Context.Consumer 组件
readContext
构建 contextItem 并添加到 workInProgress.dependencies 链表（contextItem 中保存了对当前 context 的引用)
这样在后续更新时，就可以判断当前 fiber 是否依赖了 context ，从而判断是否需要 re-render
返回对应 context 的 _currentValue 值
prepareToReadContext
主要是重置全局变量为readContext 做准备
类组件中，可以通过静态属性 contextType 消费 Context
函数组件中，可以通过 useContext 消费 Context
更新 Context
updateContextProvider
从 ContextProvider 的节点出发，向下查找所有 fiber.dependencies 依赖当前 Context 的节点
找到消费节点时，从当前节点出发，向上回溯标记父节点 fiber.childLanes，标识其子节点需要更新
从而保证了所有消费了该 Context 的子节点都会被重新渲染，实现了 Context 的更新
总结
在消费阶段，消费者通过 readContext 获取最新状态，并通过 fiber.dependencies 关联当前 Context
在更新阶段，从 ContextProvider 节点出发查找所有消费了该 context 的节点
收藏
0 条评论
下一页
