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"。