1. useContext 是 React 中的一个 Hook,它允许你在组件之间共享值,而不必显式地通过组件树逐层传递 props。当你想要在整个应用程序中传递数据时,使用 useContext 可以使代码更加简洁和易于维护。
2. 相当于vue的依赖注入模式:Provide / Inject
useContext 需要与 React.createContext() 一起使用。React.createContext() 会返回一个新的 React Context 对象。这个对象有两个属性:Provider 和Consumer。但是,useContext Hook 使得我们可以直接访问 Context 的值,而不需要使用 Consumer。
使用 useContext 的代码栗子:
import React, { createContext, useContext, useState } from 'react'; 父组件:ThemeProvider
// 创建一个新的 Context 对象
const ThemeContext = createContext(); // ThemeProvider 组件,用于包裹子组件,并提供一个 theme 属性
function ThemeProvider({ children }) { const [theme, setTheme] = useState('light'); // 返回一个对象,该对象会被 ThemeContext.Provider 使用 // 这样,所有 ThemeProvider 的子组件(包括嵌套组件)都可以访问到 theme 和 setTheme return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> );
} 子组件:ThemedButton
// 使用 useContext 访问 ThemeContext 的值
function ThemedButton() { // 使用 useContext Hook 获取 ThemeContext 的值 const { theme, setTheme } = useContext(ThemeContext); return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} style={{ background: theme }} > Toggle Theme </button> );
} function App() { return ( <ThemeProvider> <ThemedButton /> </ThemeProvider> );
} export default App;