当前位置：首页 > React

react如何使用context

2026-03-31 07:27:42React

使用 React Context 的基本步骤

创建 Context 对象：

const MyContext = React.createContext(defaultValue);

defaultValue 是当组件没有匹配到 Provider 时的默认值。

使用 Provider 提供数据：

<MyContext.Provider value={/* 某个值 */}>
  {/* 子组件 */}
</MyContext.Provider>

value 属性会被传递给消费组件。

类组件中消费 Context

使用 Context.Consumer：

react如何使用context

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染 */}
</MyContext.Consumer>

或者使用 contextType：

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于 value 渲染 */
  }
}

函数组件中消费 Context

使用 useContext Hook：

function MyComponent() {
  const value = useContext(MyContext);
  /* 基于 value 渲染 */
}

最佳实践

将 Context 与自定义 Hook 结合：

react如何使用context

function useMyContext() {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error('useMyContext must be used within a MyProvider');
  }
  return context;
}

避免不必要的重新渲染：

function MyProvider({ children }) {
  const [state, setState] = useState(initialState);
  const value = useMemo(() => [state, setState], [state]);
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

多个 Context 使用

可以嵌套多个 Provider：

<ContextA.Provider value={valueA}>
  <ContextB.Provider value={valueB}>
    {/* 子组件 */}
  </ContextB.Provider>
</ContextA.Provider>

在组件中消费多个 Context：

function MyComponent() {
  const a = useContext(ContextA);
  const b = useContext(ContextB);
  /* ... */
}

性能优化

对于频繁变化的 Context，考虑拆分：

const StateContext = React.createContext();
const DispatchContext = React.createContext();

function MyProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}