在开发 React 应用时，面对长列表或频繁更新的列表，有哪些有效的性能优化手段？请结合具体机制说明。
考察说明
考察对 React 渲染机制的理解以及实际项目中性能优化的经验。
回答思路
- 【回答框架 1】列表渲染的性能瓶颈主要在于每次数据更新时，React 会重新渲染整个列表组件及其子组件。优化核心是减少不必要的渲染和减少渲染成本。
- 【回答框架 2】使用 key 属性帮助 React 识别列表项的身份，避免因索引变化导致的状态错乱和额外的 DOM 操作。稳定且唯一的 key（如数据 ID）是关键。
- 【回答框架 3】对于静态列表，可以使用 React.memo 包裹子组件，并对 props 进行浅比较，避免父组件重渲染时子组件也跟随渲染。配合 useCallback 和 useMemo 稳定函数和计算结果。
- 【回答框架 4】对于大型或动态列表，可以采用虚拟滚动（如 react-window 或 react-virtualized）来实现按需渲染，只渲染可视区域内的列表项，降低 DOM 节点数量和渲染压力。
- 【回答框架 5】分页或无限滚动也能有效减少单次渲染的列表项数量。此外，将列表拆分成独立组件并优化状态管理，避免不必要的全局状态更新。
- 【关键点 1】正确使用稳定且唯一的 key 是基础优化。
- 【关键点 2】React.memo、useCallback 和 useMemo 可避免不必要的子组件渲染。
- 【关键点 3】虚拟滚动适合万级以上长列表，可减少 DOM 节点和渲染开销。
- 【关键点 4】分页加载和减少列表项内复杂操作也能提升性能。
- 【易错点 1】使用 index 作为 key 可能导致列表项状态错乱。
- 【易错点 2】盲目使用 React.memo 可能因 props 引用不稳定而失效。
- 【易错点 3】虚拟滚动不能解决所有场景，如动态高度项需额外处理。