在 React 中,Context 是一种用于在组件之间共享数据的方法,而不必通过组件树中的逐层传递 props。Context 可以帮助您在应用程序中有效地传递全局数据,例如当前用户身份、主题或偏好设置等。
使用 Context 通常涉及以下三个步骤:
-
创建 Context: 使用
React.createContext
方法创建一个新的 Context 对象。您可以在 Context 对象中定义默认值。const MyContext = React.createContext(defaultValue);
-
提供 Context 的值: 使用
<MyContext.Provider>
组件将 Context 的值传递给其子组件。Provider 组件的value
属性接受要传递的值。 -
<MyContext.Provider value={value}> {/* 这里是子组件 */} </MyContext.Provider>
-
消费 Context 的值: 使用
MyContext.Consumer
或useContext
Hook 从 Context 中读取其当前值。-
使用
MyContext.Consumer
:<MyContext.Consumer> {value => /* 渲染使用 value 的组件 */} </MyContext.Consumer>
-
使用
useContext
Hook:const value = useContext(MyContext);
在函数式组件中,您可以使用
useContext
Hook 来从 Context 中读取当前值。
-
下面是一个使用 Context 的示例:
// 创建 Context
const ThemeContext = React.createContext('light');
// 应用程序的根组件
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
// 子组件
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
// 子组件使用 Context
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ background: theme }}>Button</button>;
}
在上面的示例中,ThemedButton
组件通过使用 useContext(ThemeContext)
Hook,从 ThemeContext
中获取当前的主题,然后将其应用到按钮的样式上。
这就是使用 React Context 在组件之间共享数据的基本方式。