react 中 useContext Hook 作用

`useContext`是一个用于在组件之间共享数据的重要钩子函数

一、跨组件数据共享

1. 简化多层级组件数据传递

例如：在一个具有多层级菜单结构的应用中，如果要将用户权限数据从根组件传递到最深层的菜单项组件，可能需要经过多个中间组件的 props 传递，使得代码变得复杂且难以维护。而`useContext`提供了一种解决方案，通过创建和使用上下文，可以直接在需要数据的组件中获取，无需经过中间组件的层层传递。

2. 代码示例

// 创建一个上下文const UserContext = React.createContext();// 在顶层组件中提供数据const App = () => {const userData = { name: "John", role: "admin" };return (<UserContext.Provider value={userData}><ComponentA /></UserContext.Provider>);};// 深层嵌套的组件可以直接获取数据const ComponentC = () => {const userData = React.useContext(UserContext);return (<div>{userData.name} - {userData.role}</div>);};const ComponentB = () => {return <ComponentC />;};const ComponentA = () => {return <ComponentB />;};

二、实现全局数据共享

1. 应用场景

例如：在一个多语言应用中，语言环境数据可以通过上下文在整个应用的各个组件中共享。当语言环境发生改变时，所有使用该语言环境数据的组件都可以方便地做出响应。

2. 代码示例

// 创建语言环境上下文const LanguageContext = React.createContext();// 在顶层组件中设置语言环境const App = () => {const language = "en";return (<LanguageContext.Provider value={language}><Header /><MainContent /><Footer /></LanguageContext.Provider>);};// 不同的组件可以获取语言环境数据const Header = () => {const language = React.useContext(LanguageContext);// 根据语言环境渲染不同的标题return language === "en" ? <h1>English Title</h1> : <h1>中文标题</h1>;};const MainContent = () => {const language = React.useContext(LanguageContext);// 根据语言环境显示不同的内容return language === "en" ? <p>English Content</p> : <p>中文内容</p>;};const Footer = () => {const language = React.useContext(LanguageContext);// 根据语言环境显示不同的版权信息return language === "en" ? (<p>Copyright in English</p>) : (<p>版权信息（中文）</p>);};

三、组件状态的统一管理

1. 共享状态的更新与同步

例如：在一个主题切换的应用中，如果通过上下文共享了主题颜色状态，当用户切换主题颜色时，改变上下文的主题颜色值，所有使用该主题颜色的组件都会根据新的值重新渲染。

2. 代码示例

// 创建主题颜色上下文const ThemeContext = React.createContext();// 主题切换组件const ThemeToggle = () => {const [theme, setTheme] = React.useState("light");const toggleTheme = () => {setTheme(theme === "light" ? "dark" : "light");};return (<ThemeContext.Provider value={theme}><button onClick={toggleTheme}>Toggle Theme</button><ComponentUsingTheme /></ThemeContext.Provider>);};// 使用主题颜色的组件const ComponentUsingTheme = () => {const theme = React.useContext(ThemeContext);const backgroundColor = theme === "light" ? "white" : "black";const color = theme === "light" ? "black" : "white";return (<div style={{ backgroundColor, color }}>This component uses the {theme} theme.</div>);};

四、与其他状态管理方法的结合

1. 与 Redux 或 useReducer 的协同作用

例如：在使用`useReducer`管理复杂状态的同时，可以通过`useContext`将状态和更新状态的`dispatch`函数在组件之间共享。这样，既可以利用`useReducer`的可预测状态更新逻辑，又可以通过`useContext`方便地在多个组件中使用和更新状态。

2. 代码示例

// 创建一个上下文来传递状态和dispatch函数const StateContext = React.createContext();// 定义reducer和初始状态const reducer = (state, action) => {switch (action.type) {case "INCREMENT":return { count: state.count + 1 };case "DECREMENT":return { count: state.count - 1 };default:return state;}};const initialState = { count: 0 };// 在顶层组件中使用useReducer并通过上下文共享const App = () => {const [state, dispatch] = React.useReducer(reducer, initialState);return (<StateContext.Provider value={{ state, dispatch }}><Counter /></StateContext.Provider>);};// 组件可以通过useContext获取状态和dispatch函数const Counter = () => {const { state, dispatch } = React.useContext(StateContext);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button><button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button></div>);};