深入理解React Context：provider和defaultValue

前端

2023-09-29 20:05:26

React Context 简介

React Context 是一种在组件之间共享状态的强大方法。它允许您将数据从父组件传递给子组件，而无需显式地将道具逐级传递。这对于在组件树的多个级别共享数据非常有用，例如，应用程序的主题、用户身份验证状态或购物车中的商品。

Provider 和 defaultValue

当您创建 Context 对象时，您需要提供两个属性：Provider 和 defaultValue。

Provider 是一个组件，它将 Context 的值提供给其子组件。如果您想要在组件树中的某个组件中使用 Context，则需要将该组件包装在一个 Provider 中。
defaultValue 是一个值，当组件所属组件树中没有匹配到 Provider 时，它将被用作 Context 的值。如果您没有指定 defaultValue，则 Context 的值将为 undefined。

使用示例

以下是一个使用 Context 共享数据的简单示例：

import React, { createContext } from "react";

// 创建 Context 对象
const MyContext = createContext();

// 创建 Provider 组件
const MyProvider = (props) => {
  // 使用 Provider 将数据传递给子组件
  return <MyContext.Provider value={props.value}>{props.children}</MyContext.Provider>;
};

// 创建一个使用 Context 的组件
const MyComponent = () => {
  // 使用 useContext 获取 Context 的值
  const value = React.useContext(MyContext);

  return <div>My value: {value}</div>;
};

// 在应用程序中使用 Context
const App = () => {
  return (
    <MyProvider value="Hello world">
      <MyComponent />
    </MyProvider>
  );
};

export default App;