useContext 是 React 提供的一个 Hook，它允许你在函数组件中直接访问 React 的 Context API。Context API 是 React 用于实现跨组件层级的状态共享的机制，特别适用于那些“全局”数据，如主题设置、用户偏好等，这些数据需要被多个组件树中的组件访问。

基本用法

要使用 useContext，你首先需要有一个 Context 对象。这个 Context 对象可以通过 React.createContext 创建。

const MyContext = React.createContext(defaultValue);

然后，你可以使用 Context.Provider 组件包裹你的组件树，并通过 value 属性传递数据给所有的消费者（consumer）组件。

<MyContext.Provider value={/* 某个值 */}>
  {/* 组件树 */}
</MyContext.Provider>

在函数组件中，你可以使用 useContext Hook 来访问这个上下文（context）中的值。

const value = useContext(MyContext);

useContext(MyContext) 会返回当前 context 的值，这个值是由最近的 <MyContext.Provider> 的 value 属性决定的。如果没有对应的 Provider，返回值则为 createContext 时设置的 defaultValue。

示例

假设我们有一个需要在多个组件中共享的主题设置。

首先，创建一个 Context：

const ThemeContext = React.createContext('light'); // 默认值为 'light'

然后，在最顶层组件中使用 ThemeContext.Provider 来提供值：

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

在需要访问这个值的组件中，使用 useContext：

const Toolbar = () => {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>Toolbar</div>;
};

注意事项

使用 useContext 时，当 Context 的值变化时，使用了这个 Context 的所有组件都会重新渲染。因此，需要注意性能问题，特别是当这个 Context 在高层级且有许多消费者时。
useContext 使得跨组件层级的状态共享变得简单，但也不应滥用。如果能通过组件的 props 传递数据，就应优先考虑这种方式，以保持组件的独立性和可测试性。

总的来说，useContext 是 React 中处理跨组件层级状态共享的一种简洁有效的方式，它通过提供对 Context API 的直接访问，简化了在函数组件中使用 Context 的过程。

如何工作的？

创建 Context：首先，通过 React.createContext() 创建一个 Context 对象。这个步骤通常在组件树的较高层级进行。
提供 Context：使用 <Context.Provider> 组件包裹住组件树的一部分，并通过 value 属性提供 Context 值。这使得所有的子组件（无论深度）都能访问到这个 Context 的值。
消费 Context：在任意需要访问这个 Context 值的组件中，你可以使用 useContext(Context) Hook 来读取当前的 Context 值。这个值是由最近的 <Context.Provider> 的 value 属性确定的。

举个例子

假设我们有一个用于保存用户主题偏好的 Context：

// 创建 Context
const ThemeContext = React.createContext('light'); // 默认值为 'light'

在应用的顶层，我们通过 Provider 提供一个值：

// 提供 Context
const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

在任何子组件中，我们可以使用 useContext 来访问这个值：

// 消费 Context
const Toolbar = () => {
  const theme = useContext(ThemeContext); // 'dark'
  return <div className={`theme-${theme}`}>...</div>;
};

关键点

useContext 允许你订阅 React Context 的变化。当 Provider 的 value 值变化时，所有使用了 useContext 并订阅了这个 Context 的组件都会重新渲染。
Context 数据并不是存在于当前组件上，而是存在于 Context 的 Provider 中。useContext 提供了一种方便的方式来访问这些数据，而不必将 props 逐层传递下去。
使用 Context 时应当注意，如果 Context 值频繁变化，可能会导致大量组件重新渲染，从而影响性能。

总的来说，useContext 是一种在组件之间共享数据的有效方式，它让跨层级的数据传递变得简单和清晰。

个人总结

当在某个组件中使用 ThemeContext.Provider 并为其提供一个 value，那么这个 Provider 组件的所有子组件（无论层级深浅）都能通过 useContext（或者旧的 context API 中的 Context.Consumer）访问到这个值。但是，需要注意的是，这个值不会传递给 Provider 组件自身，只会传递给其子组件。

详细介绍React中的useContext

基本用法

示例

注意事项

如何工作的？

举个例子

关键点

个人总结