React Hooks 系列 之 useRef

React Hooks 系列 之 useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

返回一个持久的对象

::: details demo 代码 <<< @/components/react/hooks/useRef/Timer.jsx :::

上述的 demo 展示了 useRef 的以下特性：

  1. 持久性：useRef 返回的 ref 对象在组件的整个生命周期内都是持久的。

  2. 不会引起组件重新渲染：与 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 中用于跟踪上一次的值。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容