React 中如何创建一个 Context？

推荐答案

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

-- -------------------- ---- -------
------ ----- ---- --------

-- ---- -------
----- --------- - ----------------------------------

-- -- -------- ---
-------- ----- -
  ------ -
    ------------------- --------- --- ----
      --------------- --
    ---------------------
  --
-

-- ------- -------
-------- ---------------- -
  ------ -
    --------------------
      ------ -- -------------------
    ---------------------
  --
-

本题详细解读

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 适用于全局数据共享，但不建议频繁更新的数据。