如何避免使用Context时引起整个挂载树重新渲染？

在 React 开发中，Context 是一种便捷的状态共享方案，能够在组件树中传递数据而不必逐层传递 props。但同时，Context 更新时会触发所有消费该 Context 的组件重新渲染，这在大型应用中可能带来性能问题。
本文将探讨如何避免 Context 更新时引起整个挂载节点树的重新渲染，介绍一些优化策略和代码示例。

理解 Context 更新导致的重新渲染

React Context 更新时，所有使用 useContext 或 Consumer 的组件都会重新渲染。这是因为 React 需要确保每个消费者组件都能获取到最新的 Context 值。即使消费者组件自身没有变化，只要 Context 的 value 发生变化，它们就会触发重新渲染。

优化策略

1. 使用 useMemo 缓存 Provider value

确保传递给 Provider 的 value 在不必要更新时保持不变。避免在 Provider 内部直接创建对象或函数，每次渲染都会生成新的引用，从而引发子树重新渲染。

示例代码：

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

export const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState(0);

  // 使用 useMemo 缓存 value 对象
  const contextValue = useMemo(() => ({ state, setState }), [state]);

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

这样，只有当 state 改变时，才会创建新的 contextValue，从而避免不必要的重渲染。

2. 拆分 Context

将不同数据拆分为多个 Context，避免一个大的 Context 包含所有状态，导致部分状态更新时整个树都重新渲染。比如，将用户信息、主题设置、权限等拆分为多个 Context，各自管理。

示例代码：

export const UserContext = createContext();
export const ThemeContext = createContext();

const App = () => {
  return (
    <UserContext.Provider value={userValue}>
      <ThemeContext.Provider value={themeValue}>
        <ChildComponent />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
};

这样更新用户信息时，只会影响依赖 UserContext 的组件，主题相关组件不会重新渲染。

3. 使用 React.memo 进行组件优化

对于依赖 Context 的组件，可以使用 React.memo 对组件进行包裹，从而在 props 未发生变化时避免重新渲染。

示例代码：

import React, { useContext } from 'react';
import { MyContext } from './MyProvider';

const ChildComponent = React.memo(() => {
  const { state } = useContext(MyContext);
  return <div>State: {state}</div>;
});

export default ChildComponent;

React.memo 会对组件进行浅比较，避免因父组件重新渲染而导致不必要的子组件重渲染。

4. 使用 use-context-selector

市面上也有第三方库 use-context-selector 提供 Context 的选择器功能，使得消费者组件可以仅订阅 Context 中的某一部分数据，从而进一步减少重新渲染。

示例代码：

import { createContext } from 'react';
import { useContextSelector } from 'use-context-selector';

export const MyContext = createContext({ state: 0, setState: () => {} });

const ChildComponent = () => {
  // 仅选择 state，而忽略 setState
  const state = useContextSelector(MyContext, (ctx) => ctx.state);
  return <div>State: {state}</div>;
};