当前位置：首页 > news >正文

React Context API 用于在组件树中共享全局状态

news 来源：原创 2025/6/19 18:38:08

1. 创建 Context：

const initialValue = {
  age: 0,
  addAge: () => {},
};
export const InfoContext = createContext(initialValue);
createContext(initialValue)：

创建一个新的 Context，用来在组件树中提供和消费共享的数据。
这里的 initialValue 定义了 Context 的默认值。initialValue 中有两个属性：

age: 0：代表年龄，初始值为 0。

addAge: () => {}：一个空的函数，目的是定义如何增加年龄。

当没有明确的 Provider 时，使用的就是这个默认的 initialValue。

2. 使用 Context：

export const useInfoContext = () => {
  return useContext(InfoContext);
};

useInfoContext：
这是一个自定义的 Hook，内部调用了 React 提供的 useContext Hook。

useContext(InfoContext)：该函数返回当前 Context 的值（在 Provider 中设置的值），所以你可以在任何组件中使用 useInfoContext 来访问 age 和 addAge。

它的作用是：让组件能方便地获取到 InfoContext 中的值，并且使得这个值在组件树中任何地方都能共享和消费。

3. 定义 Context Provider：

type MyContextProviderProps = {
  children: React.ReactNode;
};

export const MyContextProvider = (props: MyContextProviderProps) => {
  const [age, setAge] = useState(18);
  const addAge = () => {
    setAge((prev) => prev + 1000);
  };

  return (
    <InfoContext.Provider value={{ age, addAge }}>
      {props.children}
    </InfoContext.Provider>
  );
};

MyContextProvider：
这是一个 React 组件，作为 InfoContext 的 Provider，用来为组件树中的所有后代组件提供共享的上下文数据。

useState(18)：
初始化 age 为 18，并提供一个 setAge 函数来更新 age 的值。

addAge：
定义了一个函数，使用 setAge 来将 age 增加 1000。当这个函数被调用时，它会修改 age，并触发组件重新渲染。

InfoContext.Provider：
这是 Context 的提供者，它将 age 和 addAge 作为 value 属性传递给它的子组件（props.children）。所有子组件都可以通过 useContext(InfoContext) 来访问这些值。

children: React.ReactNode：
这个类型表示 MyContextProvider 可以接收任何 React 组件作为其子组件，并将它们渲染出来。子组件会自动获得通过 InfoContext.Provider 提供的值。

4. 使用这个 Context：

现在，你可以在你的应用程序中的任何地方使用 useInfoContext 来访问 age 和 addAge：

例如：

const SomeComponent = () => {
  const { age, addAge } = useInfoContext();
  
  return (
    <div>
      <p>当前年龄：{age}</p>
      <button onClick={addAge}>增加年龄</button>
    </div>
  );
};

5、MyContextProvider 在哪里放

MyContextProvider 作为一个 Context Provider，应该放在你希望让所有子组件都能够访问该上下文的地方。通常，我们将它放在应用的根组件或某些较大的布局组件中，确保它覆盖了需要访问该上下文的所有组件。

 return (
    <MyContextProvider>
      <SomeComponent />
    </MyContextProvider>
  );

这样，MyContextProvider 会为整个子树提供共享的状态，子组件可以通过 useInfoContext 访问该上下文的数据。

6、完整案例

import { createContext,useContext,useState } from "react"

const initalValue={
	age: 0;
	addAge:()=>();
}
export const InfoContext = createContext(initalValue);

export const useInfoContext = ()=>{
	return useContext(InfoContext);
}

type MyContextProviderProps ={
	children:React.ReacatNode
}

export MyContextProvider =(props:MyContextProviderProps)=>{
	const [age,setAge]=useState(18)
	const addAge =()=>{
		setAge((prev)=>prev+1000)
	}
	retrurn (
		<InfoContext.Provider value={{ age,addAge}}>
			{props.children}
		</InfoContext.Provider>
	)
}