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

1. 创建 Context:

bash 复制代码
const initialValue = {
  age: 0,
  addAge: () => {},
};
export const InfoContext = createContext(initialValue);
createContext(initialValue):

创建一个新的 Context,用来在组件树中提供和消费共享的数据。

这里的 initialValue 定义了 Context 的默认值。initialValue 中有两个属性:

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

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

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

2. 使用 Context:

bash 复制代码
export const useInfoContext = () => {
  return useContext(InfoContext);
};

useInfoContext:

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

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

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

3. 定义 Context Provider:

bash 复制代码
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:

例如:

bash 复制代码
const SomeComponent = () => {
  const { age, addAge } = useInfoContext();
  
  return (
    <div>
      <p>当前年龄:{age}</p>
      <button onClick={addAge}>增加年龄</button>
    </div>
  );
};

5、MyContextProvider 在哪里放

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

bash 复制代码
 return (
    <MyContextProvider>
      <SomeComponent />
    </MyContextProvider>
  );

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

6、完整案例

bash 复制代码
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>
	)
}
相关推荐
quan263115 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路16 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app