一篇文章,带你学会useRef、useCallback、useMemo
发布网友
发布时间：20小时前
共1个回答
热心网友
时间：2024-12-05 06:55
useRef 是一个返回可变 ref 对象的 Hook。这个对象的 .current 属性在组件生命周期中保持不变,因此可以存储任何值。它的 key 特性使其在组件重新渲染时不被重新创建,从而保持引用的持久性。
### 示例分析
要实现点击按钮后输入框自动获取焦点,使用ref对象来获取DOM。createRef与useRef都是实现这一功能的手段,但它们有不同之处。
- **createRef**每次渲染都会返回一个新的引用。
- **useRef**则始终返回同一个引用,保持引用的持久性。
useRef的使用体现了闭包机制,即使组件重新渲染,ref对象的值也不会改变。这使得即使在函数组件中使用useRef,也能避免不必要的渲染。
### 示例: 实现不实时弹出的renderIndex
在示例中,每次点击事件触发后,组件重新渲染,但因为useRef保持了引用的持久性,所以`handleClick`函数获取的`renderIndex`总是当前的值,而非最新的值。这说明了useRef可以存储组件状态,而不受渲染周期的影响。
### usePrevious
考虑到函数组件的生命周期,useRef可以实现存储上一个值的功能。这是因为函数组件在执行、渲染、执行useEffect后再次执行,此时ref.current的值为上一次的值。封装usePrevious Hook可以利用这一特性。
### 使用useCallback与useMemo
useCallback与useMemo是用于优化组件性能的Hook。
- **useMemo**用于计算昂贵值,只有依赖项改变时才会重新计算,避免了不必要的计算。
- **useCallback**则用于优化回调函数,只有依赖项改变时才会生成新的函数引用,避免了不必要的函数创建。
使用useCallback与React.memo结合,可以避免子组件在父组件重新渲染时的无谓渲染,确保只有当回调函数的引用改变时,子组件才会更新。
通过本文,您不仅能够理解这三个Hook的基本概念和用法,还能掌握它们在实际开发中的应用场景,从而在构建React应用时提高性能和代码效率。
