useContext 的使用方法

问题

如何使用 useContext 在组件间共享数据？

解答

什么是 Context

Context 可以看作扩大版的 props，它能将数据通过 Provider 传递给被包裹的所有子组件，避免逐层传递 props。

Context 是局部的全局变量，只有被 Provider 包裹的组件才能访问这些数据。

使用步骤

1. 创建 Context

import { createContext } from 'react';

const MyContext = createContext();

2. 使用 Provider 传递数据

import React, { createContext, useContext, useState } from 'react';

const initialState = { m: 100, n: 50 };
const X = createContext();

export default function App() {
  const [state, setState] = useState(initialState);
  
  return (
    <X.Provider value={{ state, setState }}>
      <Child />
    </X.Provider>
  );
}

3. 子组件获取数据

function Child() {
  const { state, setState } = useContext(X);
  
  const handleClick = () => {
    setState({ m: state.m + 1, n: state.n + 1 });
  };
  
  return (
    <div>
      <p>m: {state.m}, n: {state.n}</p>
      <button onClick={handleClick}>修改数据</button>
    </div>
  );
}

注意事项

当 Context 的值发生变化时，所有使用该 Context 的组件都会重新渲染。这是 React 的更新机制，而不是响应式数据绑定。

关键点

• 使用 createContext() 创建上下文对象
• 通过 Provider 组件的 value 属性传递数据
• 子组件使用 useContext(Context) 获取数据
• Context 值变化会触发所有消费组件重新渲染
• 适合跨层级传递数据，避免 props 逐层传递