使用记忆化技术优化组件渲染
记忆化是一种常用的性能优化技巧,它能够帮助我们减少重复计算,提升程序性能。
在 React 中有 Hook 和 API 可以帮助我们实现记忆化:
useMemo
:用于记忆化计算值。useCallback
:用于记忆化函数。memo
:用于记忆化组件。
业务开发中大部分性能问题不是因为少缓存了一个值或函数,反而是因为错误的使用更新链造成的额外渲染。 因此除非有明显的性能问题,否则不建议过早的使用
useMemo
或useCallback
。避免引入多余的更新链。
在本章节中,我将分别介绍这三种记忆化技术。