

首页  思维导图  详情



ReactContext

2024-05-03 10:44:13   2  举报





AI智能生成

ReactContext原理

前端开发

React

模版推荐

作者其他创作

大纲/内容

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 的节点

 Collect

Get Started





0 条评论

下一页