共计 1178 个字符，预计需要花费 3 分钟才能阅读完成。
React Hooks 系列 之 useRef
- 原文地址 –DapanDocs：https://skillgroup.cn/framework/react/hooks/use-ref.html
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内放弃不变。
返回一个长久的对象
<div ref=”useRef1″ />
::: details demo 代码
<<< @/components/react/hooks/useRef/Timer.jsx
:::
上述的 demo 展现了 useRef 的以下个性：
- 持久性 ：
useRef返回的 ref 对象在组件的整个生命周期内都是长久的。 - 不会引起组件从新渲染 ：与
useState不同，批改useRef的.current属性不会引起组件从新渲染。在 demo 中，即便咱们减少了count.current的值，组件也没有从新渲染。
与 DOM 交互
<div ref=”useRef2″ />
::: details demo 代码
<<< @/components/react/hooks/useRef/TextInputWithFocus.jsx
:::
这个 demo 次要展现了 useRef 如何在 React 中用于间接与 DOM 元素交互。
保留上一次的值
<div ref=”useRef3″ />
::: details demo 代码
<<< @/components/react/hooks/useRef/PreviousValueComponent.jsx
:::
这个 demo 次要展现了 useRef 如何在 React 中用于跟踪上一次的值。
<script setup>
import {ref} from ‘vue’
import renderReact from ‘@components/react/renderReact’
import Timer from ‘@components/react/hooks/useRef/Timer’
import TextInputWithFocus from ‘@components/react/hooks/useRef/TextInputWithFocus’
import PreviousValueComponent from ‘@components/react/hooks/useRef/PreviousValueComponent’
const useRef1 = ref(null)
const useRef2 = ref(null)
const useRef3 = ref(null)
renderReact(Timer, useRef1)
renderReact(TextInputWithFocus, useRef2)
renderReact(PreviousValueComponent, useRef3)
</script>