面试题：React 中 memo 与 Context 结合时的性能陷阱及优化

性能陷阱

Context 数据频繁变化但 memo 判断不准确：
- 原因：React.memo默认只进行浅比较，当 Context 中的数据是对象或数组时，即使内部数据变化但引用未变，memo会认为数据未改变，导致子组件不能及时更新。例如，Context 传递一个对象{count: 1}，如果后续修改count的值，但对象引用不变，memo不会触发子组件更新。
嵌套 Context 带来的更新问题：
- 原因：如果子组件依赖多个嵌套的 Context，只要任何一个 Context 发生变化，即使React.memo包裹了子组件，也可能导致不必要的重新渲染。因为React.memo无法精准判断到底是哪个 Context 的变化对该组件有实际影响。
函数作为 Context 值导致的不必要更新：
- 原因：每次父组件重新渲染，函数的引用都会改变。如果将函数作为 Context 值传递给memo包裹的子组件，即使函数体未改变，memo也会认为依赖改变，导致子组件重新渲染。

优化策略

自定义比较函数：
- 做法：在React.memo中传入自定义的比较函数，进行深度比较。例如：

import React from'react';

const MyComponent = React.memo((props) => {
  // 组件逻辑
}, (prevProps, nextProps) => {
  // 深度比较逻辑，这里以比较两个对象为例
  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
});

export default MyComponent;

在实际项目中，如果 Context 传递的是复杂数据结构，通过这种深度比较能更准确判断数据是否真正变化，避免因浅比较导致的更新异常。

拆分 Context：
- 做法：将不同功能的 Context 拆分，减少嵌套。比如在一个电商项目中，用户信息 Context 和购物车信息 Context 可以分开。这样当用户信息变化时，不会影响仅依赖购物车信息的子组件。
- 例如：

// UserContext.js
import React from'react';
export const UserContext = React.createContext();

// CartContext.js
import React from'react';
export const CartContext = React.createContext();

使用 useCallback 稳定函数引用：
- 做法：在父组件中使用useCallback包裹传递给 Context 的函数，确保函数引用稳定。例如：

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

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    // 点击处理逻辑
  }, []);

  return (
    <MyContext.Provider value={{ handleClick }}>
      {/* 子组件 */}
    </MyContext.Provider>
  );
};

export default ParentComponent;

在实际项目中，这样可以避免因函数引用变化导致memo包裹的子组件不必要的重新渲染。

星途面试题库

面试题：React 中 memo 与 Context 结合时的性能陷阱及优化

知识考点

面试题答案

性能陷阱

优化策略