介绍
什么是 useref
useref 是 react hook，它允许创建对值或 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 (
<div>
<p>count: {countref.current}</p>
<button onclick={increment}>increment</button>
</div>
)
}
export default app
在上面的示例中，如果您单击按钮，它将调用增量函数，这将增加 countref，但计数不会在 <p>count: {countref.current}</p> 处更新，因为更新 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} />;
您可能会在控制台中收到错误：
警告：不能给函数组件提供引用。尝试访问此引用将失败。您是想使用 react.forwardref() 吗？
要解决此问题，请使用forwardref 包装自定义组件，如下所示：
const inputref = useref(null);
return <myinput value={value} ref={inputref} />;
自定义组件：
import { forwardRef } from 'react';
const MyInput = forwardRef(({ value, onChange }, ref) => {
return (
<input
value={value}
onChange={onChange}
ref={ref}
/>
);
});
export default MyInput;
结论
useref 是一个功能强大的钩子，主要用于副作用使用，例如在重新渲染之间缓存数据或访问 dom 元素。它是 react 应用程序中性能优化和实现特定功能的绝佳工具。
