React Hooks 系列 之 useRef
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数(initialValue)。返回的对象将在组件的整个生命周期内保持不变。
返回一个持久的对象
::: details demo 代码 <<< @/components/react/hooks/useRef/Timer.jsx :::
上述的 demo 展示了 useRef
的以下特性:
-
持久性:
useRef
返回的 ref 对象在组件的整个生命周期内都是持久的。 -
不会引起组件重新渲染:与
useState
不同,修改useRef
的.current
属性不会引起组件重新渲染。在 demo 中,即使我们增加了count.current
的值,组件也没有重新渲染。
与 DOM 交互
::: details demo 代码 <<< @/components/react/hooks/useRef/TextInputWithFocus.jsx :::
这个 demo 主要展示了 useRef 如何在 React 中用于直接与 DOM 元素交互。
保存上一次的值
::: details demo 代码 <<< @/components/react/hooks/useRef/PreviousValueComponent.jsx :::
这个 demo 主要展示了 useRef 如何在 React 中用于跟踪上一次的值。