介绍 什么是 userefuseref 是 react hook,它允许创建对值或 dom 元素的持久引用。与 usestate 用于管理触发重新渲染的状态不同,useref 主要用于副作用或直接访问 dom 元素。 为什么使用 userefuseref 钩子特别有用:直接访问 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 ( <div> <p>count: {countref.current}</p> <button onclick="{increment}">increment</button> </div> )}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 ( <div> <p>count: {count}</p> <button onclick="{increment}">increment</button> </div> )}export default app登录后复制 useref 的常见用例 直接访问和操作 dom 元素可以使用 useref 钩子来访问和更改 html 元素的属性const app = () => { const inputref = useref(null) const handlefocus = () => { inputref.current.focus() } return( <input ref="{inputref}"> )}登录后复制 持久的价值观与 usestate 或变量不同,useref 可以在重新渲染之间传递值和数据,例如缓存数据或配置设置。 性能优化在某些情况下,使用 useref 可以通过避免不必要的重新渲染来帮助组件优化。就像如果您有一个渲染大量项目列表的组件,您可以使用 useref 缓存它,并且仅修改重新渲染已更改的项目。 最佳实践和注意事项渲染期间请勿写入?或读取 ref.current?您可以改变 ref.current?属性当您更改 ref.current 属性时,react 不会重新渲染您的组件信息是组件的每个副本的本地(与共享的外部变量不同)。您可以在重新渲染之间存储信息(与常规变量不同,每次渲染时都会重置)。您可以从事件处理程序或效果中读取或写入引用。使用 ref 操作 dom 将引用传递给自定义组件。如果您尝试像这样将引用传递给您自己的组件const inputref = useref(null);return <myinput ref="{inputref}"></myinput>;登录后复制您可能会在控制台中收到错误:警告:不能给函数组件提供引用。尝试访问此引用将失败。您是想使用 react.forwardref() 吗?要解决此问题,请使用forwardref 包装自定义组件,如下所示:const inputref = useref(null);return <myinput value="{value}" ref="{inputref}"></myinput>;登录后复制自定义组件:import { forwardRef } from 'react';const MyInput = forwardRef(({ value, onChange }, ref) => { return ( <input value="{value}" onchange="{onChange}" ref="{ref}"> );});export default MyInput;登录后复制 结论useref 是一个功能强大的钩子,主要用于副作用使用,例如在重新渲染之间缓存数据或访问 dom 元素。它是 react 应用程序中性能优化和实现特定功能的绝佳工具。 以上就是了解 useRef:初学者指南的详细内容,更多请关注我的其它相关文章!
标签:指南,useRef,gt,const,渲染,useref,current,初学者,countref From: https://www.cnblogs.com/aow054/p/18424220