在 React 中,我们经常需要处理一些非受控组件或者需要直接操作 DOM 的情况。而 useRef 就是 React 提供的一个 Hook,可以让我们方便地获取和操作 DOM 元素或者其他非受控组件。
useRef 是什么
useRef 是 React 提供的一个 Hook,用于在函数组件中存储一个可变的、持久化的值。这个值可以是任意类型的数据,包括 DOM 元素、非受控组件等等。
和 useState 不同的是,useRef 返回的是一个 ref 对象,而不是一个 state 值。ref 对象的 current 属性可以存储和访问当前的值,而且这个值可以在组件重新渲染时保持不变。
useRef 的使用
获取 DOM 元素
使用 useRef 可以方便地获取 DOM 元素,并在需要时直接操作它们。例如,我们可以在组件中定义一个 ref 对象,并将它赋值给一个 DOM 元素:
------ - ------ - ---- -------- -------- ------------- - ----- -------- - ------------- ----- ----------- - -- -- - ------------------------- -- ------ - ----- ------ ----------- -------------- -- ------- ------------------------------------ ------ -- -
在这个例子中,我们定义了一个 inputRef ref 对象,并将它赋值给一个 input 元素的 ref 属性。然后,在 handleClick 函数中,我们可以使用 inputRef.current 获取到这个 input 元素,并调用它的 focus 方法将焦点设置到这个元素上。
存储组件状态
除了 DOM 元素,我们还可以使用 useRef 存储组件状态。因为 ref 对象的 current 属性可以在组件重新渲染时保持不变,所以我们可以将一些需要在组件渲染周期中持久化的状态存储在 ref 对象中。
例如,我们可以使用 useRef 存储一个计数器的值,并在组件渲染时更新这个值:
------ - ------- -------- - ---- -------- -------- ------------- - ----- ------- --------- - ------------ ----- -------- - -------------- ----- ----------- - -- -- - ---------------- - ---------------- - -- --------------------------- -- ------ - ----- --------- ----------- ------- ---------------------------------------- ------ -- -
在这个例子中,我们定义了一个 countRef ref 对象,并将它赋值为 count 的初始值。然后,在 handleClick 函数中,我们更新 countRef.current 的值,并将这个值传递给 setCount 函数,从而更新组件状态。
存储任意类型的数据
除了 DOM 元素和组件状态,我们还可以使用 useRef 存储任意类型的数据。这个特性可以让我们在函数组件中方便地存储和访问一些临时的、不需要在组件渲染周期中持久化的数据。
例如,我们可以使用 useRef 存储一个定时器的 ID,并在组件卸载时清除这个定时器:
------ - ------- --------- - ---- -------- -------- ------------- - ----- -------- - ------------- ------------ -- - ---------------- - -------------- -- - -------------------- -- ------ ------ -- -- - -------------------------------- -- -- ---- ------ ------- ---------------- -
在这个例子中,我们定义了一个 timerRef ref 对象,并将它赋值为 null。然后,在 useEffect 中,我们使用 setInterval 创建一个定时器,并将它的 ID 存储在 timerRef.current 中。最后,在组件卸载时,我们使用 clearInterval 清除这个定时器。
总结
useRef 是 React 提供的一个 Hook,用于在函数组件中存储一个可变的、持久化的值。我们可以使用 useRef 获取和操作 DOM 元素、存储组件状态或者存储任意类型的数据。ref 对象的 current 属性可以在组件重新渲染时保持不变,从而让我们方便地存储和访问这些数据。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65fe37f2d10417a22297c64c