面试题：React多分支渲染中的性能优化

组件拆分与 React.memo 使用：
- 将复杂组件拆分成更小的组件，对纯展示组件使用 React.memo。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染该组件。在多分支渲染场景中，对于那些只依赖特定 props 且在 props 不变时不需要重新渲染的组件，应用 React.memo 可避免不必要渲染。例如，在根据用户权限展示不同菜单的场景中，菜单展示组件如果只依赖权限相关 props，就可以用 React.memo 包裹。
状态管理优化：
- 合理管理状态，确保状态提升到合适的层级。减少父组件不必要的状态更新，因为父组件状态更新会导致所有子组件重新渲染。在多分支渲染场景中，如果某些分支的渲染只依赖局部状态，就将这些状态放在对应的子组件中管理，而不是提升到不必要的高层级组件。
- 使用 useReducer 代替 useState 来管理复杂状态，useReducer 可以将状态更新逻辑集中处理，避免因多个 useState 导致的不必要状态更新和重新渲染。

缓存计算结果：
- useMemo 用于缓存一个值，只有当依赖项发生变化时才重新计算。在多分支渲染场景中，如果某个分支中有复杂的计算逻辑，比如根据用户角色计算不同的统计数据，可将该计算逻辑放在 useMemo 中。例如：
```
const calculatedValue = useMemo(() => {
  // 复杂计算逻辑，依赖于 userRole
  return userRole === 'admin'? complexCalculation1() : complexCalculation2();
}, [userRole]);
```
避免过度使用：
- 虽然 useMemo 能缓存值，但它本身也有一定开销。如果计算逻辑很简单，或者计算结果变化频繁，使用 useMemo 可能得不偿失，反而影响性能。

缓存回调函数：
- useCallback 用于缓存回调函数，只有依赖项变化时才重新创建回调。在多分支渲染场景中，如果某个分支中有需要传递给子组件的回调函数，且该回调函数依赖某些状态，使用 useCallback 可以避免不必要的函数重新创建，从而防止子组件因函数引用变化而重新渲染。例如：
```
const handleClick = useCallback(() => {
  // 依赖 count 状态的点击处理逻辑
  setCount(count + 1);
}, [count]);
```
依赖数组准确性：
- useCallback 的依赖数组必须准确列出所有回调函数内部依赖的变量。如果遗漏依赖，可能导致回调函数使用到过期的变量值；如果依赖过多，会导致回调函数不必要地重新创建。

星途面试题库