面试题：React 渲染复杂列表时如何处理动态更新与性能优化

使用 key：
- 为列表项指定唯一的 key。key 是 React 识别列表项的重要标识，在列表数据发生变化时，React 可以通过 key 更准确地判断哪些列表项需要更新、添加或删除，从而避免不必要的重新渲染。例如：
```
{listData.map((item) => (
  <li key={item.id}>
    {/* 列表项内容 */}
  </li>
))}
```
Memoization（记忆化）：
- React.memo：对于列表项组件，可以使用 React.memo 包裹。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，如果 props 没有变化，组件不会重新渲染。例如：
```
const ListItem = React.memo((props) => {
  return (
    // 列表项内容，包含图片、文本和按钮
  );
});
```
- useMemo 和 useCallback：
  - useMemo：在父组件中，如果有一些计算成本较高的值作为列表项组件的 props，使用 useMemo 来缓存这些值，避免在每次渲染时重新计算。例如，如果列表项的某个样式需要根据复杂计算得出：
```
const expensiveCalculation = useMemo(() => {
  // 复杂计算
  return result;
}, [dependency]);
<ListItem style={expensiveCalculation} />
```
  - useCallback：如果列表项中的交互按钮需要传递回调函数，使用 useCallback 来缓存回调函数，防止因为函数引用变化导致列表项组件不必要的重新渲染。例如：
```
const handleButtonClick = useCallback(() => {
  // 按钮点击逻辑
}, []);
<ListItem onClick={handleButtonClick} />
```

虚拟列表：

当列表数据量非常大时，采用虚拟列表技术。只渲染当前视口内可见的列表项，而不是渲染整个列表。可以使用第三方库如 react - virtualized 或 react - window。例如使用 react - virtualized 中的 List 组件：

import { List } from'react - virtualized';
const rowRenderer = ({ index, key, style }) => {
  const item = listData[index];
  return (
    <div key={key} style={style}>
      {/* 列表项内容 */}
    </div>
  );
};
<List
  height={400}
  rowCount={listData.length}
  rowHeight={50}
  rowRenderer={rowRenderer}
  width={300}
/>

状态管理：
- 合理管理组件状态。将列表数据的状态提升到合适的父组件，通过 props 传递给列表项组件。这样可以避免在子组件中频繁更新状态导致不必要的重新渲染。例如，如果是添加列表项操作，在父组件中处理添加逻辑并更新列表数据状态，然后将新的列表数据通过 props 传递给列表组件。
- 使用 useReducer 替代 useState 进行更复杂的状态管理。useReducer 可以将状态更新逻辑集中在一个 reducer 函数中，使得状态更新更可预测和易于维护，尤其适用于列表数据有多种复杂更新操作的场景。例如：
```
const initialState = { listData: [] };
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return { listData: [...state.listData, action.payload] };
    case 'DELETE_ITEM':
      return { listData: state.listData.filter((item) => item.id!== action.payload.id) };
    case 'UPDATE_ITEM':
      return {
        listData: state.listData.map((item) =>
          item.id === action.payload.id? { ...item, ...action.payload.updates } : item
        )
      };
    default:
      return state;
  }
};
const [state, dispatch] = useReducer(reducer, initialState);
```

星途面试题库

面试题：React 渲染复杂列表时如何处理动态更新与性能优化

知识考点

面试题答案