使用 ref 引用值

当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 ref 。

const ref = useRef(0);

useRef 返回一个这样的对象:

{ current: 0 // 你向 useRef 传入的值
}

与 state 一样，ref 在重新渲染之间由 React 保留。但是，设置 state 会重新渲染组件，而更改 ref 不会！

可以使用 ref 来存储 timeout ID、DOM 元素 和其他不影响组件渲染输出的对象。

使用 ref 操作 DOM

import { useRef } from 'react';export default function Form() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></>);
}