欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > React Context API 用于在组件树中共享全局状态

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

2025/4/19 1:37:39 来源:https://blog.csdn.net/u010194271/article/details/146940547  浏览:    关键词:React Context API 用于在组件树中共享全局状态

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>)
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词