一篇文章，带你学会useRef、useCallback、useMemo
2026-02-25 11:40:25
useRef、useCallback、useMemo是React中用于优化组件性能和管理的Hook，以下是它们的使用方法与原理：
1. useRef 功能：返回一个可变 ref 对象，其 .current 属性在组件生命周期中保持不变，因此可以存储任何值。 特性：key 特性是在组件重新渲染时不被重新创建，从而保持引用的持久性。 使用场景： 获取DOM元素：通过ref对象可以方便地获取到DOM元素，并进行操作，如设置焦点等。 存储组件状态：由于ref对象的持久性，可以用来存储不受渲染周期影响的组件状态。 实现usePrevious Hook：利用ref对象在函数组件的生命周期中的特性，可以实现存储上一个值的功能。
2. useCallback 功能：返回一个记忆化的回调函数，只有在其依赖项改变时才会更新。 优化：避免在每次渲染时都创建新的函数引用，从而优化性能。 使用场景： 当父组件传递给子组件的回调函数在父组件重新渲染时不应该改变时，可以使用useCallback来避免子组件的无谓渲染。 与React.memo结合使用，可以进一步优化组件的性能。
3. useMemo 功能：返回一个记忆化的值，只有在其依赖项改变时才会重新计算。 优化：避免在每次渲染时都进行昂贵的计算，从而提高性能。 使用场景： 当需要计算一个值，而这个值的计算过程比较昂贵，并且这个值在依赖项不变的情况下不需要重新计算时，可以使用useMemo。 适用于避免在渲染过程中进行不必要的计算，提高组件的性能。
总结： useRef用于获取DOM元素、存储不受渲染周期影响的组件状态以及实现自定义Hook等。 useCallback用于优化回调函数，避免在父组件重新渲染时子组件的无谓渲染。 useMemo用于避免在每次渲染时都进行昂贵的计算，提高组件性能。
热门标签
