[react] 如何合理使用 useContext【热度: 1,326】

web框架腾讯

关键词：合理使用 context 的层级、避免滥用 context、避免context引起重复渲染、优化context重复渲染

如何合理使用 useContext

useContext 是 React 中提供的一种跨组件传递数据的方式，可以让我们在不同层级的组件之间共享数据，避免了繁琐的 props 传递过程。使用 useContext 可以大大简化组件之间的通信方式，提高代码可维护性和可读性。

下面是一些使用 useContext 的最佳实践：

  1. 合理使用 context 的层级

context 可以跨组件传递数据，但是过多的 context 层级会使代码变得复杂、难以维护，而且会影响性能。因此，应该尽量避免嵌套过多 context 的层级，保持简单的组件结构。

  1. 将 context 统一定义在一个文件中

为了方便管理和使用，我们应该将 context 的定义统一放在一个文件中，这样能够避免重复代码，也能方便其他组件引用。

  1. 使用 context.Provider 提供数据

使用 context.Provider 来提供数据，将数据传递给子组件。在 Provider 中可以设置 value 属性来传递数据。

  1. 使用 useContext 获取数据

使用 useContext hook 来获取 context 中的数据。useContext 接收一个 context 对象作为参数，返回 context 的当前值。这样就可以在组件中直接使用 context 中的数据。

  1. 避免滥用 useContext

虽然 useContext 可以方便地跨组件传递数据，但是滥用 useContext 也会使代码变得难以维护。因此，在使用 useContext 时，应该优先考虑组件通信是否真的需要使用
useContext。只有在需要跨越多级组件传递数据时，才应该使用 useContext 解决问题。

如何避免使用 context 的时候， 引起整个挂载节点树的重新渲染？

使用 context 时，如果 context 中的值发生了变化，会触发整个组件树的重新渲染。这可能会导致性能问题，特别是在组件树较大或者数据变化频繁的情况下。

为了避免这种情况，可以采用以下方法：

  1. 对 context 值进行优化

如果 context 中的值是一个对象或者数组，可以考虑使用 useMemo 或者 useCallback 对其进行优化。这样可以确保只有在值发生变化时才会触发重新渲染。

  1. 将 context 的值进行拆分

如果 context 中的值包含多个独立的部分，可以考虑将其进行拆分，将不需要更新的部分放入另一个 context 中。这样可以避免因为一个值的变化而导致整个组件树的重新渲染。

  1. 使用 shouldComponentUpdate 或者 React.memo 进行优化

对于一些需要频繁更新的组件，可以使用 shouldComponentUpdate 或者 React.memo 进行优化。这样可以在值发生变化时，只重新渲染需要更新的部分。

  1. 使用其他数据管理方案

如果 context 不能满足需求，可以考虑使用其他数据管理方案，如 Redux 或者 MobX。这些方案可以更好地控制数据更新，避免不必要的渲染。

如果 context 中的值是一个对象或者数组，可以考虑使用 useMemo 或者 useCallback 对其进行优化

代码举例： 以下是一个使用 useMemo 对 context 值进行优化的示例代码：

import React, { useMemo, createContext } from 'react';

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

// 创建一个 Provider
const MyProvider = ({ children }) => {
  // 定义一个复杂的数据对象
  const data = useMemo(() => {
    // 这里可以是一些复杂的计算逻辑
    return {
      name: "Alice",
      age: 18,
      hobbies: ["Reading", "Traveling", "Sports"],
      friends: [
        { name: "Bob", age: 20 },
        { name: "Charlie", age: 22 },
        { name: "David", age: 24 }
      ]
    };
  }, []);

  return (
    // 将 data 作为 value 传入 context.Provider
    <MyContext.Provider value={data}>
      {children}
    </MyContext.Provider>
  );
};

// 在 Consumer 中使用 context
const MyConsumer = () => {
  return (
    <MyContext.Consumer>
      {data => (
        <div>
          <div>Name: {data.name}</div>
          <div>Age: {data.age}</div>
          <div>Hobbies: {data.hobbies.join(", ")}</div>
          <div>Friends:
            <ul>
              {data.friends.map(friend => (
                <li key={friend.name}>
                  {friend.name} ({friend.age})
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </MyContext.Consumer>
  );
};

// 使用 MyProvider 包裹需要使用 context 的组件
const App = () => {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  );
};

export default App;

在上面的示例中，我们使用了 useMemo 对复杂的数据对象进行了缓存。这样，当 context 中的值变化时，只会重新计算数据对象的值，而不是重新创建一个新的对象。这样可以有效地减少不必要的渲染。