深入解读 React Context：从创建到消费和更新

2023-11-18 21:52:45

React 源码解读：Context 的深入剖析

React 的 Context 属性提供了一种跨层级组件传递数据的便捷方式，打破了传统 props 层层传递的局限性。本文将深入剖析 Context 的源码实现，从创建、消费到更新，全面解读其工作原理。

创建 Context

创建 Context 的核心逻辑在 createContext 函数中。它返回一个包含两个组件的 React 对象：Provider 和 Consumer。Provider 用于提供 Context 的值，而 Consumer 用于消费该值。

export function createContext<T>(defaultValue: T): ReactContext<T> {
  const context: ReactContext<T> = {
    ...context,
    Provider,
    Consumer,
  };

  // 省略 Provider 和 Consumer 的定义

  return context;
}

消费 Context

Consumer 组件通过使用 useContext Hook 来获取 Context 的值。useContext Hook 会自动寻找最接近的 Provider，并从其中获取值。

export function useContext<T>(context: ReactContext<T>): T {
  const dispatcher = currentDispatcher;
  if (dispatcher === null) {
    throw new Error('useContext must be used within a component's render method');
  }

  // 省略获取 Provider 值的逻辑

  return state;
}

更新 Context

Context 的更新发生在 Provider 组件内。当 Provider 的 props 发生变化时，Provider 会通知所有订阅的 Consumer 重新渲染。

export function Provider<T>(props: ProviderProps<T>) {
  const dispatcher = currentDispatcher;
  if (dispatcher === null) {
    throw new Error('Provider must be used within a component's render method');
  }

  // 省略更新 Consumer 逻辑

  return props.children;
}

示例

下面是一个使用 Context 的简单示例：

// 定义 Context
const ThemeContext = React.createContext('light');

// 使用 Provider 提供 Context 值
const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
};

// 使用 Consumer 消费 Context 值
const Child = () => {
  const theme = React.useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
};