React 中如何创建一个 Context？

推荐答案

在 React 中，可以通过 React.createContext 方法来创建一个 Context。以下是一个简单的示例：

// www.javascriptcn.com code example
import React from 'react';

// 创建一个 Context
const MyContext = React.createContext(defaultValue);

// 使用 Provider 提供值
function App() {
  return (
    <MyContext.Provider value={/* 某个值 */}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 在子组件中使用 Context
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

本题详细解读

1. 创建 Context

使用 React.createContext(defaultValue) 可以创建一个 Context 对象。defaultValue 是当组件没有匹配到 Provider 时使用的默认值。这个值可以是任何类型的数据，如字符串、对象、数组等。

const MyContext = React.createContext(defaultValue);

2. 使用 Provider 提供值

Provider 是一个 React 组件，它允许消费组件订阅 Context 的变化。Provider 接收一个 value 属性，这个值会被传递给所有消费组件。

<MyContext.Provider value={/* 某个值 */}>
  <ChildComponent />
</MyContext.Provider>

3. 在子组件中使用 Context

在子组件中，可以通过 Context.Consumer 来访问 Context 的值。Consumer 需要一个函数作为子元素，这个函数接收当前的 Context 值并返回一个 React 节点。

<MyContext.Consumer>
  {value => <div>{value}</div>}
</MyContext.Consumer>

4. 使用 useContext Hook（可选）

在函数组件中，还可以使用 useContext Hook 来简化 Context 的使用。

import React, { useContext } from 'react';

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

5. 注意事项

• 如果没有匹配到 Provider，defaultValue 会被使用。
• Provider 的 value 属性发生变化时，所有消费组件都会重新渲染。
• Context 适用于全局数据共享，但不建议频繁更新的数据。