React useContext - 技术栈

useContext 是 React 的一个内建 Hook，它允许函数组件订阅 React 的 Context 对象。通过使用 useContext，你可以让组件在不通过中间元素逐层传递 props 的情况下访问共享的数据。这对于主题、用户偏好、认证信息等跨越多层组件树的数据非常有用。

作用：

useContext 提供了一种在组件之间共享数据的方法，而不需要显式地通过组件树的每一层传递 props。当使用 Context API 时，数据可以直接从定义它的地方传递到使用它的组件，跳过中间的组件层。

用法：

首先，你需要使用 React.createContext 创建一个 Context 对象。然后，通过 Context.Provider 来包裹你的组件树，并通过 value 属性传递要共享的数据。在函数组件中，你可以使用 useContext 钩子来订阅这个 Context 对象。

javascript 复制代码

import React, { useContext, createContext, useState } from 'react';

// 创建一个 Context 对象
const MyContext = createContext();

function ChildComponent() {
  // 使用 useContext 订阅 Context
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

function ParentComponent() {
  const [value, setValue] = useState('Hello from Context!');

  return (
    // 使用 Context.Provider 包裹子组件，并传递 Context 的当前值
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default ParentComponent;

在这个例子中，ParentComponent 创建了一个 Context，并通过 MyContext.Provider 将一个字符串值传递给了 ChildComponent。ChildComponent 使用 useContext 钩子订阅了 MyContext，并能够直接访问到传递的值。

使用注意事项：

避免频繁的 Context 值变动 ：如果你把一个会频繁变动的对象传递给 Context 的 value，那么所有订阅了这个 Context 的组件都会重新渲染，这可能会导致性能问题。
不要滥用 Context：Context 是为了共享在组件树中不同层级间全局数据而设计的，对于一些简单的组件通信，传递 props 可能是更好的选择。
默认值的使用 ：createContext() 方法接受一个默认值作为参数，这个默认值在组件树中没有合适的 Provider 或者组件未被 Provider 包裹时使用。
Context 分割：如果你的 Context 对象中的数据有不同的更新频率，可以考虑将它们拆分成多个单独的 Context，以避免不必要的渲染。
使用 useMemo 和 useCallback 管理依赖 ：如果 Context 的值依赖于组件的 state 或 props，使用 useMemo 或 useCallback 来避免因父组件的渲染而导致子组件不必要的重新渲染。

useContext 钩子是 React Context API 的使用变得更加简洁明了。正确使用 Context API 可以使得跨层级的数据流更加高效，但也要注意避免上述的一些常见陷阱。