React 中 useContext 的作用和用法是什么？

推荐答案

useContext 是 React 提供的一个 Hook，用于在函数组件中访问 React 的上下文（Context）。它允许你在不通过组件树逐层传递 props 的情况下，将数据传递给深层嵌套的组件。

用法示例

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

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

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

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

在这个例子中，ParentComponent 通过 MyContext.Provider 提供了一个值，ChildComponent 通过 useContext 获取了这个值并显示出来。

本题详细解读

什么是 useContext？

useContext 是 React 16.8 引入的一个 Hook，用于在函数组件中访问 React 的上下文（Context）。它简化了在组件树中传递数据的方式，避免了“prop drilling”（即通过多层组件传递 props）的问题。

如何使用 useContext？

1. 创建 Context：首先需要使用 React.createContext() 创建一个 Context 对象。
2. 提供 Context 值：通过 Context.Provider 组件将值传递给子组件。
3. 消费 Context 值：在子组件中使用 useContext Hook 来获取 Context 的值。

示例代码解析

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

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

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

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

• MyContext：通过 React.createContext() 创建的 Context 对象。
• ParentComponent：使用 MyContext.Provider 包裹子组件，并通过 value 属性传递数据。
• ChildComponent：通过 useContext(MyContext) 获取 ParentComponent 提供的值，并在组件中使用。

注意事项

• useContext 只能在函数组件中使用。
• 当 Context.Provider 的 value 发生变化时，所有使用 useContext 的子组件都会重新渲染。
• 如果组件树中没有匹配的 Context.Provider，useContext 会返回 Context 的默认值（如果有的话）。