React.context使用

### 如何使用 React Context API 进行状态管理 #### 创建上下文对象 创建一个上下文对象，该对象提供了一个消费组件订阅其值的方式。通常，在顶层文件中定义此对象。 ```javascript import { createContext } from 'react'; // 定义默认值 const MyContext = createContext('default value'); ``` #### 提供者 (Provider) `<MyContext.Provider>` 让消费者组件能够订阅 context 变化。接受 `value` 属性传递给子树中的任何匹配的 consumer 组件[^1]。 ```jsx <MyContext.Provider value="some value"> <Component /> </MyContext.Provider> ``` 对于复杂的状态逻辑，建议封装成自定义 hook 或更高阶组件来简化 Provider 的使用[^2]。 #### 消费者 (Consumer) 有两种方式去访问由 provider 提供的数据： - `<MyContext.Consumer>` ```jsx function ConsumerComponent() { return ( <MyContext.Consumer> {(contextValue) => <div>{contextValue}</div>} </MyContext.Consumer> ); } ``` - `useContext Hook` ```jsx import { useContext } from 'react'; import { MyContext } from './path-to-context'; function FunctionalComponent() { const contextValue = useContext(MyContext); return <div>{contextValue}</div>; } ``` 这种方式更加简洁明了，推荐用于函数式组件中。 #### 实际案例：全局认证状态管理 考虑一个简单的例子，其中包含用户登录状态的管理。这里展示的是如何将多个 Providers 嵌套在一起以处理不同类型的全局状态。 ```jsx import React, { useState, createContext, useEffect } from 'react'; import ReactDOM from 'react-dom'; import App from './App'; export const AuthContext = createContext(); function AuthProvider({ children }) { const [isAuthenticated, setIsAuthenticated] = useState(false); useEffect(() => { // Simulate fetching authentication status on app load. setTimeout(() => { setIsAuthenticated(true); // Assume user is authenticated after some delay. }, 1000); }, []); return ( <AuthContext.Provider value={{ isAuthenticated }}> {children} </AuthContext.Provider> ); } ReactDOM.render( <AuthProvider> <App /> </AuthProvider>, document.getElementById('root') ); ``` 上述代码展示了如何利用 Context API 来管理和分发应用程序内的全局状态，从而减少 prop-drilling 并使代码更易于理解和维护。