DEV Community
·
React 性能优化技术（第一部分）
💡
原文英文，约2500词，阅读约需9分钟。
📝
内容提要
React 是一个用于构建用户界面的库，以虚拟 DOM 提升 UI 更新效率。但在大型应用中，频繁渲染可能影响性能。为此，React 提供了列表虚拟化、延迟加载和记忆化等技术，优化性能和用户体验。
🎯
关键要点
- React 是一个用于构建用户界面的强大库，具有虚拟 DOM 的核心特性，提升 UI 更新效率。
- 虚拟 DOM 是真实 DOM 的内存表示，React 通过比较当前虚拟 DOM 和之前快照来检测变化，从而只更新变化的部分。
- 在大型应用中，频繁的重新渲染可能导致性能问题，因此 React 提供了多种优化技术。
- 有效的性能优化技术包括列表虚拟化、延迟加载和记忆化等。
- 列表虚拟化通过仅渲染可见部分来提高大列表的性能，避免一次性加载整个列表。
- 延迟加载技术可以推迟加载屏幕外的图像，从而改善初始页面加载时间和用户体验。
- 记忆化是一种优化技术，通过缓存计算结果来避免不必要的重新渲染和重新计算。
- 在 React 中，记忆化可以通过 useMemo、memo 和 useCallback 实现。
- useMemo 用于缓存函数调用的结果，避免在依赖项未变化时重复计算。
- React.memo 是一个高阶组件，用于记忆功能组件，确保只有在 props 变化时才重新渲染。
- useCallback 用于缓存函数定义，防止在每次渲染时重新创建函数，从而避免不必要的子组件重新渲染。
➡️
