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>
	)
}
相关推荐
MediaTea11 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~11 小时前
CSS——重排和重绘
前端
奶糖 肥晨12 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法12 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang12 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高00713 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
正义的大古13 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
Hashan13 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js
前端Hardy13 小时前
轻松搞定JavaScript数组方法,面试被问直接答!
前端·javascript·面试