react context实现原理
React Context 的实现原理
React Context 是 React 提供的一种跨组件层级传递数据的机制，避免了手动逐层传递 props 的繁琐。其核心原理基于发布-订阅模式，通过 Provider 和 Consumer 组件实现数据的传递和消费。
Context 的创建
通过 React.createContext 创建一个 Context 对象，该对象包含 Provider 和 Consumer 两个组件。createContext 的默认值仅在未匹配到 Provider 时生效。
const MyContext = React.createContext(defaultValue);Provider 的实现
Provider 组件通过 React 的上下文机制将数据传递给子组件。内部使用 value 属性存储当前 Context 的值，并通过 React 的 Fiber 树结构维护上下文层级。
<MyContext.Provider value={currentValue}>
{children}
</MyContext.Provider>Consumer 的订阅机制
Consumer 组件通过订阅 Provider 的 value 变化获取数据。当 Provider 的 value 更新时，所有订阅的 Consumer 会触发重新渲染。
<MyContext.Consumer>
{value => <Component value={value} />}
</MyContext.Consumer>上下文更新与渲染优化
React 使用 Fiber 架构的上下文链路来优化更新。当 Provider 的 value 变化时，React 会从 Provider 开始向下遍历子树，标记所有依赖该 Context 的组件为需要更新，避免不必要的渲染。
Hooks 的支持
useContext Hook 是 Consumer 的语法糖，内部通过 React 的调度机制订阅最近的 Provider 值变化。
const value = useContext(MyContext);性能注意事项
频繁变化的 Context 值可能导致大量子组件重新渲染。可以通过拆分 Context 或结合 React.memo 优化性能。
