useRef 用于返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）

useRef 创建的 ref 对象就是一个普通的 JavaScript 对象，而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象

const refContainer = useRef(initialValue);

绑定 DOM 元素：

使用 useRef 创建的 ref 对象可以作为访问 DOM 的方式，将 ref 对象以 <div ref={myRef} /> 形式传入组件，React 会在组件创建完成后会将 ref 对象的 .current 属性设置为相应的 DOM 节点

import React, { useRef } from 'react'export default function FocusButton() {const inputEl = useRef(null);const onButtonClick = () => {inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);
}

绑定可变值：

useRef 创建的 ref 对象同时可以用于绑定任何可变值，通过手动给该对象的.current 属性设置对应的值即可

import React, { useState, useRef, useEffect } from 'react';export default function Counter() {const [count, setCount] = useState(0);const currentCount = useRef();// 使用 useEffect 获取当前 countuseEffect(() => {currentCount.current = count;}, [count]);const alertCount = () => {setTimeout(() => {alert(`Current count is: ${currentCount.current}, Real count is: ${count}`);}, 3000);}return (<><p>count: {count}</p><button onClick={() => setCount(count + 1)}>Count add</button><button onClick={alertCount}>Alert current Count</button></>);
}