沁水做网站,海外酒店 网站建设,做学院网站用到的动图,个人网站备案后内容可以改么useRef 用法特点注意事项 用法
useRef 函数返回一个可变的 ref 对象#xff0c;该对象只有一个 current 属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。
// 1. 导入 useRef
import { useRef } from react
// 2. 调… useRef 用法特点注意事项 用法
useRef 函数返回一个可变的 ref 对象该对象只有一个 current 属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。
// 1. 导入 useRef
import { useRef } from react
// 2. 调用 useRef 创建 ref 对象
const refObj useRef(初始值)
// 3. 通过 ref.current 访问 ref 中存储的值
console.log(refObj.current)特点
获取 DOM 元素或子组件的实例对象
import React, { useRef } from reactexport const InputFocus: React.FC () {// 1. 创建 ref 引用const iptRef useRefHTMLInputElement(null) // 加上泛型引用后就可以提示代码了const getFocus () {// 3. 调用 focus API让文本框获取焦点iptRef.current?.focus() // iptRef.current可能为空后面使用链式调用?.来保证不报错}return ({/* 2. 绑定 ref 引用 */}input typetext ref{iptRef} /button onClick{getFocus}点击获取焦点/button/)
}存储渲染周期之间共享的数据
export const Counter: React.FC () {const [count, setCount] useState(0)const prevCountRef useRefnumber() // 默认值为 undefined泛型为number将来要存number类型的值let preCount // 创建一个变量存储旧值无法实现因为每次count发生变化时组件重新渲染导致preCount初始化为undefinedconst add () {setCount((c) c 1)prevCountRef.current count // 记录旧值到prevCountRef中// preCount count // 错误写法无法实现}return (h1新值是{count}旧值是{prevCountRef.current} /h1button onClick{add}1/button/)
}注意事项
组件rerender重新渲染时useRef不会被重复初始化ref.current发生变化时不会造成组件的rerender重新渲染ref.current不能作为其他hooksuseMemo、useCallback、useEffect 等 的依赖项 组件首次渲染后会触发一次 useEffect 。但当time.current 变化不会触发 useEffect 的重新执行。
export const RefTimer: React.FC () {const time useRef(Date.now())const updateTime () {time.current Date.now()}useEffect(() {console.log(time 的值发生了变化 time.current)}, [time.current])return (h3时间戳是{time.current}/h3button onClick{updateTime}给ref赋新值/button/)
}
