React的基础知识：Context

练习两年半的工程师2024-11-28 23:35

1. Context

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

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

javascript 复制代码

const MyContext = React.createContext(defaultValue);

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

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

java 复制代码

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

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

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

javascript 复制代码

const value = useContext(MyContext);

示例

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

javascript 复制代码

// 创建 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>;
}

在这个例子中，ThemeContext 被用来在 App 组件和 ThemeButton 组件之间共享当前的主题颜色。App 组件通过 ThemeContext.Provider 提供了主题颜色的值，而 ThemeButton 组件使用 useContext Hook 来消费这个值。