面试题：Next.js嵌套路由下上下文传递的优化策略

使用 useMemo 和 useCallback
- useMemo 用于缓存值：
  - 当传递给上下文的值是通过函数计算得出时，使用 useMemo 可以避免不必要的重新计算。例如，如果上下文数据依赖于一些频繁变化但实际不会影响上下文值的状态，通过 useMemo 可以确保只有在依赖项真正变化时才重新计算。
```
const MyContext = createContext();
const MyProvider = ({ children }) => {
  const data = useMemo(() => {
    // 复杂计算逻辑
    return someComplexCalculation();
  }, [dependency1, dependency2]);
  return (
    <MyContext.Provider value={data}>
      {children}
    </MyContext.Provider>
  );
};
```
- useCallback 用于缓存函数：
  - 如果传递给上下文的是函数，使用 useCallback 可以避免函数在每次渲染时重新创建。这对于防止不必要的子组件重新渲染非常重要，因为函数引用的变化会触发依赖该函数的子组件重新渲染。
```
const MyContext = createContext();
const MyProvider = ({ children }) => {
  const handleClick = useCallback(() => {
    // 点击处理逻辑
  }, []);
  return (
    <MyContext.Provider value={{ handleClick }}>
      {children}
    </MyContext.Provider>
  );
};
```
减少上下文嵌套层级
- 提升上下文位置：尽量将上下文提供组件提升到尽可能高的层级，这样可以减少数据需要传递的层级深度。例如，如果有一些数据需要在多个嵌套路由组件中共享，可以将上下文提供者放在应用的顶层路由组件附近，而不是在较深的嵌套组件中。
- 使用中间组件：可以创建一些中间组件，这些中间组件在接收上下文数据后，再将其传递给更深层级的子组件，从而减少直接嵌套传递的层级。
使用 shouldComponentUpdate 或 React.memo
- React.memo 用于函数式组件：
  - 对于接收上下文数据的函数式子组件，可以使用 React.memo 来包裹组件。React.memo 会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染组件。这在上下文数据变化频率较低时非常有效。
```
const MyChildComponent = React.memo(({ dataFromContext }) => {
  // 组件渲染逻辑
});
```
- shouldComponentUpdate 用于类组件：
  - 对于类组件，可以重写 shouldComponentUpdate 方法。在这个方法中，可以手动比较新老上下文数据，只有在数据真正发生变化时才返回 true 进行重新渲染。
```
class MyClassChildComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 比较上下文数据，例如
    return nextProps.dataFromContext!== this.props.dataFromContext;
  }
  render() {
    // 组件渲染逻辑
  }
}
```
采用局部状态代替全局上下文
- 分析数据需求：对于一些并非真正全局需要共享的数据，可以在需要的组件内部使用局部状态管理（如 useState 或 useReducer）。这样可以避免将这些数据放入上下文，从而减少上下文传递的性能开销。
- 数据聚合：如果有多个局部状态相关的数据，可以考虑将它们聚合在一个更接近使用这些数据的中间组件中进行管理，而不是通过上下文传递到深层组件。

面试题：Next.js嵌套路由下上下文传递的优化策略

知识考点

面试题答案