深入理解React Router:从原理到实践
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.2.4 useRef

在使用class类组件时,通常需要声明属性,用以保存DOM节点。借助useRef,同样可以在函数组件中保存DOM节点的引用:

useRef返回一个可变的Ref对象,其 current 属性被初始化为传递的参数(initialValue)。useRef返回的可变对象就像一个“盒子”,这个“盒子”存在于组件的整个生命周期中,其current属性保存了一个可变的值。

useRef不仅适用于DOM节点的引用,类似于类上的实例属性,useRef还可用来存放一些与UI无关的信息。useRef返回的可变对象,其current属性可以保存任何值,如对象、基本类型或函数等。所以,函数组件虽然没有类的实例,没有“this”,但是通过useRef依然可以解决数据的存储问题。如在2.1节,曾使用过useRef:

上例使用useRef返回了可变对象historyUnBlockCb,通过historyUnBlockCb.current保存了history.block的返回值。

注意,更改refObject.current的值不会导致重新渲染。如果希望重新渲染组件,则可使用useState,或者使用某种forceUpdate方法。