巧妙地减少useContext不必要的渲染，拥抱高效的数据管理

2024-02-15 21:31:19

前言
在React生态系统中，useContext是一个强大的工具，可用于在组件树中有效地管理状态。它允许我们访问共享状态，而无需显式地将其作为道具传递。然而，当我们使用useContext时，每当上下文更新时，所有使用该上下文的组件都会重新渲染。这可能会导致不必要的渲染并影响应用程序的性能，尤其是在数据是由多个部分组成的情况下。

剖析问题

考虑一个包含用户数据的上下文示例，其中包含以下字段：

username
email
address
preferences

在这个上下文中，username和email字段很少更新，而address和preferences字段可能会频繁更改。如果我们使用useContext来访问此上下文，则每当address或preferences更新时，所有使用该上下文的组件都会重新渲染，即使它们只依赖于username和email字段。

解决方案：优化渲染

为了解决这个问题，我们可以使用useMemo hook来仅在必要时重新计算上下文值。useMemo接受一个回调函数，该函数返回一个值，并在依赖项数组发生变化时重新计算该值。我们可以将useMemo与useContext结合使用，如下所示：

import { useContext, useMemo } from 'react';
import { UserContext } from './UserContext';

const MyComponent = () => {
  const userContext = useContext(UserContext);

  // 只在username或email字段更新时才重新计算userState
  const userState = useMemo(() => {
    return {
      username: userContext.username,
      email: userContext.email,
    };
  }, [userContext.username, userContext.email]);

  // 使用优化后的userState
  return (
    <div>
      <h1>{userState.username}</h1>
      <p>{userState.email}</p>
    </div>
  );
};

在这个例子中，userState只会在username或email字段更新时重新计算，从而减少了不必要的渲染。这有助于提高应用程序的性能，尤其是在数据是由多个部分组成的情况下。

进阶技巧：选择性重新渲染

除了使用useMemo之外，我们还可以使用useSelector hook（来自Redux库）来更精细地控制组件的重新渲染。useSelector接受一个选择器函数，该函数返回存储状态的一部分。只有当选择器返回的值发生变化时，useSelector才会重新渲染组件。

import { useSelector } from 'react-redux';
import { selectUsername, selectEmail } from './userSelectors';

const MyComponent = () => {
  // 只选择username和email字段
  const username = useSelector(selectUsername);
  const email = useSelector(selectEmail);

  // 使用选择后的值
  return (
    <div>
      <h1>{username}</h1>
      <p>{email}</p>
    </div>
  );
};