”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 了解 useRef:初学者指南

了解 useRef:初学者指南

发布于2024-11-07
浏览:832

Understanding useRef: A Beginners Guide

介绍

什么是 useRef

useRef 是 React 钩子,允许创建对值或 DOM 元素的持久引用。与用于管理触发重新渲染的状态的 useState 不同,useRef 主要用于副作用或直接访问 DOM 元素。

为什么使用 useRef

useRef 钩子特别有用:

  • 直接访问 DOM 元素:您可以使用 useRef 获取对 DOM 元素的引用,允许您直接操作它而无需触发重新渲染。
  • 创建持久值:与状态不同,使用 useRef 创建的值在渲染之间保留,这使得它们非常适合存储不需要触发重新渲染的数据。

了解 useRef 钩子

useRef 钩子返回一个具有 .current 属性的对象。当您调用 useRef 时,它会创建对您作为参数传递的值的持久引用。此引用存储在返回对象的 .current 属性中。

使用 useRef 创建引用

要创建引用,只需使用初始值调用 useRef 即可。

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

在上面的示例中,countRef 是对初始值 0 的引用。

访问参考值

要访问参考值,只需调用带有 .current 属性的 countRef 对象

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

Count: {countRef.current}

) } export default App

在上面的示例中,如果您单击按钮,它将调用增量函数,这将增加 countRef,但计数不会在

Count: {countRef.current}

处更新,因为更新了 useRef不会导致像 useState. 这样的重新渲染

将代码更新为下面的示例以获得您期望的结果。

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

Count: {count}

) } export default App

useRef 的常见用例

直接访问和操作 DOM 元素

可以使用 useRef 钩子来访问和更改 html 元素的属性

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

持久的价值观

与 useState 或变量不同,useRef 可以在重新渲染之间传递值和数据,例如缓存数据或配置设置。

性能优化

在某些情况下,使用 useRef 可以通过避免不必要的重新渲染来帮助组件优化。就像如果您有一个渲染大量项目列表的组件,您可以使用 useRef 缓存它,并且仅修改重新渲染已更改的项目。

最佳实践和注意事项

  • 渲染期间请勿写入或读取ref.current
  • 您可以改变 ref.current 属性
  • 当您更改 ref.current 属性时,React 不会重新渲染您的组件
  • 信息对于组件的每个副本来说都是本地的(与共享的外部变量不同)。您可以在重新渲染之间存储信息(与常规变量不同,每次渲染时重置)。
  • 您可以从事件处理程序或效果中读取或写入引用
  • 用 ref 操作 dom

将引用传递给自定义组件。

如果您尝试像这样将引用传递给您自己的组件

const inputRef = useRef(null);

return ;

您可能会在控制台中收到错误:
警告:不能给函数组件提供引用。尝试访问此引用将失败。您的意思是使用 React.forwardRef() 吗?

要解决此问题,请使用forwardRef 包装自定义组件,如下所示:

const inputRef = useRef(null);

return ;

自定义组件:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

结论

useRef 是一个功能强大的钩子,主要用于副作用使用,例如在重新渲染之间缓存数据或访问 DOM 元素。它是 React 应用程序中性能优化和实现特定功能的绝佳工具。

版本声明 本文转载于:https://dev.to/kada/understanding-useref-a-beginners-guide-58bg?1如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3