面试题：React Context在复杂嵌套组件树中性能优化

可能导致性能问题的原因

Context 频繁更新：Context 的值一旦更新，所有使用该 Context 的组件不论是否真的需要数据变化，都会重新渲染。例如在顶层组件频繁修改 Context 数据，会使深层嵌套且依赖该 Context 的组件不必要的重新渲染。
未优化的消费者组件：直接使用 Context.Consumer 或通过 useContext hook 获取 Context 的组件，没有对传入数据变化进行控制，只要上层 Context 有更新，就触发重新渲染。

性能优化方法

shouldComponentUpdate：对于类组件，在使用 Context 的类组件中，可以重写 shouldComponentUpdate 方法。通过比较新旧 Context 数据来决定是否需要重新渲染。例如：

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

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    const prevContext = this.context;
    const nextContext = nextProps.context;
    // 比较相关 Context 数据，这里假设 context 有一个 data 属性
    return prevContext.data!== nextContext.data;
  }
  render() {
    return <div>{this.context.data}</div>;
  }
}
MyComponent.contextType = MyContext;
export default MyComponent;

React.memo：对于函数组件，使用 React.memo 包裹使用 Context 的函数组件。React.memo 会对组件的 props 进行浅比较，如果 props 没有变化则不重新渲染。当使用 useContext 时，可将相关 Context 数据作为依赖数组传入 React.memo。例如：

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

const MyComponent = React.memo(() => {
  const context = useContext(MyContext);
  return <div>{context.data}</div>;
}, (prevProps, nextProps) => {
  // 比较相关 Context 数据，这里假设 context 有一个 data 属性
  return prevProps.context.data === nextProps.context.data;
});

export default MyComponent;

减少 Context 更新频率：尽量将 Context 更新操作放在必要时，避免不必要的频繁更新。例如可以将多个状态合并在一个对象中，只有当真正需要改变 Context 时，才触发更新，而不是每次小的状态变化都更新 Context。
使用 useMemo 和 useCallback：在提供 Context 的组件中，使用 useMemo 来缓存 Context 的值，使用 useCallback 来缓存传递给 Context 消费者的函数。这样可以避免不必要的重新创建，减少触发 Context 消费者组件重新渲染的可能性。例如：

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

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [data, setData] = React.useState(0);
  const memoizedData = useMemo(() => data, [data]);
  const handleClick = useCallback(() => {
    setData(data + 1);
  }, [data]);
  const contextValue = useMemo(() => ({
    data: memoizedData,
    handleClick
  }), [memoizedData, handleClick]);

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

export { MyContext, MyProvider };

星途面试题库

面试题：React Context在复杂嵌套组件树中性能优化

知识考点

面试题答案

可能导致性能问题的原因

性能优化方法