目录

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>
	)
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
Yvette-W7 分钟前
【JavaScript】原型链 prototype 和 this 关键字的练习(老虎机)
开发语言·前端·javascript·ecmascript·原型模式
程序员JerrySUN15 分钟前
设计模式 Day 4:观察者模式(Observer Pattern)深度解析
javascript·观察者模式·设计模式
烂蜻蜓20 分钟前
HTML5 新元素:革新网页开发体验
前端·html·html5
CsharpDev-奶豆哥1 小时前
使用JS+HTML+CSS编写提词器实例
javascript·css·html
在下千玦1 小时前
#关于require 与 import 相关了解
javascript·node.js
森叶1 小时前
利用本地 Express Web 服务解决复杂的 Electron 通信链路的问题
前端·electron·express
土豆丶杨1 小时前
vue3+electron 桌面应用初始化
javascript·vue.js·electron
冴羽2 小时前
SvelteKit 最新中文文档教程(18)—— 浅层路由和 Packaging
前端·javascript·svelte
哀木2 小时前
聊聊前端埋点 clarity:我会一直视监你... 永远...
前端
墨渊君2 小时前
Expo 入门指南:让 React Native 开发更轻松(含环境搭建)
前端·javascript·react native