当前位置：首页 > article >正文

React的基础知识：Context

article 2024/11/28 20:01:28

1. Context

在 React 中，Context 提供了一种通过组件树传递数据的方式，无需手动在每个层级传递 props。这在处理一些全局应用状态时非常有用，比如用户认证、主题、语言偏好等。

如何使用 Context
创建 Context：首先，你需要使用 React.createContext 创建一个新的 Context 对象。

const MyContext = React.createContext(defaultValue);

这里的 defaultValue 是当组件没有被任何 Provider 包裹时，消费组件（Consumer）会使用的值。

提供 Context 值：使用 <Context.Provider> 组件来包裹你的组件树，以便提供 Context 值。

<MyContext.Provider value={/* 一些值 */}>
  <ChildComponent />
</MyContext.Provider>

value 属性可以是任何你想要传递给消费组件的数据，它可以是一个对象，也可以是一个函数。

消费 Context 值
使用 useContext Hook：useContext 是一个 Hook，它允许函数组件直接订阅 Context 的变化。

const value = useContext(MyContext);

示例
以下是一个简单的 Context 示例，展示了如何创建和使用 Context 来共享一个主题颜色。

// 创建 Context
const ThemeContext = React.createContext('light');

// 提供 Context 值
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 消费 Context 值
function Toolbar() {
  return (
    <div>
      <ThemeButton />
    </div>
  );
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button>{theme === 'dark' ? 'Light' : 'Dark'}</button>;
}