react context

在 React 中，Context 是一种用于在组件之间共享数据的方法，而不必通过组件树中的逐层传递 props。Context 可以帮助您在应用程序中有效地传递全局数据，例如当前用户身份、主题或偏好设置等。

使用 Context 通常涉及以下三个步骤：

1. 创建 Context： 使用 React.createContext 方法创建一个新的 Context 对象。您可以在 Context 对象中定义默认值。

   const MyContext = React.createContext(defaultValue);

2. 提供 Context 的值： 使用 <MyContext.Provider> 组件将 Context 的值传递给其子组件。Provider 组件的 value 属性接受要传递的值。

3. <MyContext.Provider value={value}>
     {/* 这里是子组件 */}
   </MyContext.Provider>
   

4. 消费 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 在组件之间共享数据的基本方式。