React 中如何消费 (Consume) Context？

推荐答案

在 React 中，消费 Context 的主要方式有两种：

1. 使用 useContext Hook：

   import React, { useContext } from 'react';
   import MyContext from './MyContext';
   
   const MyComponent = () => {
     const contextValue = useContext(MyContext);
     return <div>{contextValue}</div>;
   };

2. 使用 Context.Consumer：

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

本题详细解读

1. 使用 useContext Hook

useContext 是 React 16.8 引入的 Hook，它允许你在函数组件中直接消费 Context。使用 useContext 时，你需要将 Context 对象作为参数传递给 useContext，它会返回当前 Context 的值。

• 优点：代码简洁，易于理解，适合在函数组件中使用。
• 缺点：只能在函数组件中使用，不能在类组件中使用。

2. 使用 Context.Consumer

Context.Consumer 是 React 提供的一种用于消费 Context 的组件。它需要一个函数作为子元素（即 Render Props 模式），这个函数会接收当前的 Context 值作为参数，并返回一个 React 元素。

• 优点：可以在类组件和函数组件中使用，灵活性较高。
• 缺点：代码相对冗长，尤其是在嵌套多个 Context 时，代码可读性会下降。

选择哪种方式？

• 如果你使用的是函数组件，并且 React 版本在 16.8 以上，推荐使用 useContext Hook，因为它更简洁、直观。
• 如果你需要在类组件中消费 Context，或者 React 版本较低，只能使用 Context.Consumer。

注意事项

• 无论使用哪种方式，确保 Context 的 Provider 已经包裹了消费 Context 的组件，否则消费的 Context 值将是默认值（即 createContext 时传入的默认值）。
• 如果 Context 的值发生变化，所有消费该 Context 的组件都会重新渲染。