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