面试题：React 复杂场景下 memo 对 Context 子组件更新优化的深度剖析

实现思路

分析 Context 依赖：
- 仔细梳理子组件到底依赖哪些 Context 中的哪些数据片段。这需要对项目的数据流有清晰的理解，可能要通过阅读组件代码和 Context 定义代码来完成。
- 例如，假设存在 UserContext 和 ThemeContext，子组件可能只依赖 UserContext 中的 userName 和 ThemeContext 中的 primaryColor。
使用 React.memo：
- 对于依赖 Context 数据的子组件，用 React.memo 包裹。React.memo 是一个高阶组件，它通过浅比较 props 来决定组件是否需要重新渲染。
- 例如：
```
const MyComponent = React.memo((props) => {
  // 组件逻辑
  return <div>{props.data}</div>;
});
```

自定义比较函数：

由于 Context 数据可能是复杂结构，浅比较可能不准确。可以为 React.memo 提供一个自定义的比较函数 areEqual。
在 areEqual 函数中，精准比较子组件依赖的 Context 数据片段。例如：

const areEqual = (prevProps, nextProps) => {
  return (
    prevProps.userContext.userName === nextProps.userContext.userName &&
    prevProps.themeContext.primaryColor === nextProps.themeContext.primaryColor
  );
};
const MyComponent = React.memo((props) => {
  // 组件逻辑
  return <div>{props.data}</div>;
}, areEqual);

Context 选择器：
- 可以使用类似于 Redux - Toolkit 中的 createSelector 的工具（如 reselect 库）来创建 Context 选择器。这些选择器可以从 Context 数据中提取子组件真正需要的部分，并进行缓存。
- 例如，使用 reselect：
```
import { createSelector } from'reselect';

const selectUserName = (userContext) => userContext.userName;
const selectPrimaryColor = (themeContext) => themeContext.primaryColor;

const selectRelevantData = createSelector(
  [selectUserName, selectPrimaryColor],
  (userName, primaryColor) => ({
    userName,
    primaryColor
  })
);
```
- 然后在子组件中使用这个选择器来获取数据，这样当 Context 数据变化时，只有相关部分改变才会触发子组件更新。

可能用到的辅助工具或技巧

reselect 库：如上述提到，用于创建高效的选择器，缓存计算结果，避免不必要的重复计算。
useMemo 和 useCallback：
- useMemo 可以用来缓存复杂计算的结果，确保在依赖不变时不会重新计算。例如，如果子组件依赖从 Context 数据计算得出的某个值，可以使用 useMemo 缓存该计算。
- useCallback 用于缓存函数，当依赖不变时，函数引用不会改变。这在传递给子组件的回调函数依赖 Context 数据时很有用，避免因函数引用变化导致子组件不必要的更新。

不同实现方案的优缺点

仅使用 React.memo 浅比较：
- 优点：实现简单，不需要引入额外的库。对于简单的 props 结构和依赖，能快速减少不必要的渲染。
- 缺点：对于复杂的 Context 数据结构，浅比较可能无法精准判断，导致子组件在不需要更新时更新，影响性能。
使用自定义比较函数：
- 优点：能够精准控制子组件何时更新，根据实际依赖进行比较。对复杂数据结构的处理更灵活。
- 缺点：编写比较函数需要对数据结构和依赖有深入理解，代码量相对增加，且维护成本可能较高。如果依赖关系变化，比较函数可能需要调整。
结合 Context 选择器（如 reselect）：
- 优点：能高效地从复杂 Context 数据中提取相关部分，并且缓存计算结果。使得子组件更新控制更精准，减少不必要的重新计算和渲染。
- 缺点：引入了额外的库，增加了项目的复杂度。需要学习新的 API 和概念，并且在项目中要合理组织选择器，否则可能导致代码混乱。

星途面试题库

面试题：React 复杂场景下 memo 对 Context 子组件更新优化的深度剖析

知识考点

面试题答案

实现思路

可能用到的辅助工具或技巧

不同实现方案的优缺点