React-Hooks中的useRef和forwardRef

4,950 阅读1分钟

useRef

  • 目的:需要一个值在组件不断渲染时保持不变
  • 初始化:const count = useRef(0)
  • 读取:count.current
  • 为什么需要用current?是为了保证两次useRef是同一个值(只有引用可以做到)。
  • useRef既可以用来引用DOM对象,也可以用来引用普通对象。

useRef可以做到变化时自动render吗

并不能

  • 因为这不符合react的理念:每次data变化时使用一个函数将data渲染成一个新的虚拟DOM,然后用该虚拟DOM和页面中的DOM做DOM diff得到一个patch,之后才去操作这个DOM,即UI=f(data)(可见之前的博客:虚拟DOM和DOM diff
  • 如果想要useRef时自动render,需要自己添加该功能:监听ref,当ref.current变化时,调用setX即可实现。

forwardRef

  • 想在函数组件中使用ref,就一定会用到forwardRef

  • 在函数组建中,props无法传递ref属性,而forwardRef可以多接受一个ref参数,从而实现ref在函数组件中的传递。

  • (为什么props不包含ref呢?因为大多数时候不需要。)


useImperativeHandle

顺带提一嘴。。

  • 使用useImperativeHandle可以自定义传输的ref值。
  • 最好配合forwardRef使用。
  • 参考它的功能,建议理解为"setRef"。