一、什么是useRef
useRef会返回一个可变的ref对象，它会把初始化参数绑定到current属性上。当然初始化属性可以通过函数返回。
const UseRefInitialValueFunc = () => {
const initialValueFunc = () => {
// ...
return '初始化数据'
}
// 函数返回初始化数据
const initRef = useRef(initialValueFunc())
const handleClick = () => {
console.log(initRef.current) // 初始化数据
}
return (<div onClick={handleClick}>点击</div>)
}
二、useRef开发中应用场景
react官网的介绍总是那么晦涩难懂😂😂😂。简单的说：可以通过useRef来获取dom元素，或者class组件实例；
function UseRefGetDom() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
console.log("inputEl：",inputEl)
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>输入框聚焦</button>
</>
);
}
useRef获取了input元素，并调用input的focus方法实现输入框聚焦。
其次，useRef 返回的 ref 对象在组件的整个生命周期内保持不变，也就是说每次重新渲染函数组件时，返回的ref 对象都是同一个（使用 React.createRef ，每次重新渲染组件都会重新创建 ref）
function UseRefDuration() {
const [state,setState] = useState(0)
const currentRef = useRef(0)
const handleClick = () => {
setState(() => state + 1)
currentRef.current = currentRef.current + 1
// state和currentRef.current同时+1。
// console输出渲染之前state和currentRef.current值；页面显示渲染之后state和currentRef.current值
console.log("state:",state,"currentRef:",currentRef)
};
return (
<>
<div>state:{state}</div>
<div>currentRef.current:{currentRef.current}</div>
<button onClick={handleClick}>输入框聚焦</button>
</>
);
}
结合控制台和页面输出分析：控制台输出渲染之前state和currentRef.current值；页面显示渲染之后state和currentRef.current值。通过useRef保存的属性可以在渲染前后不发生变化，并且改变.current属性不会触发组件渲染！
参考资料：
