React Hooks 教程之 useRef

介绍

useRef 返回一个可变的 ref 对象，ref 对象在组件的整个生命周期一直存在，其 current 属性为保存的值

官方的解释有点晦涩，下面展示两个用法实例，实践出真知：
1、 保存 JSX 中 DOM 元素的引用，用于操作 UI 元素
2、 保存变量值，这一点同 useState，区别在于，useRef 保存的变量值改变时，并不会通知你

保存 DOM 元素

将 App.tsx 文件内容替换为下面的代码：

import React from "react";
import "./App.css";

const App: React.FC = () => {
    const inputRef = React.useRef<HTMLInputElement>(null);

    return (
        <>
            <input ref={inputRef} type="text" />
            <button
                onClick={() => {
                    inputRef.current?.focus();
                }}
            >
                输入框获取焦点
            </button>
        </>
    );
};

export default App;

因为用了 TypeScript，所以 useRef 需要指定类型 HTMLInputElement，要不然会报错

点击按钮即可让输入框获取焦点，运行效果如下

保存变量

将 App 组件替换为下面的代码

const App: React.FC = () => {
    const valueRef = React.useRef(false);

    return (
        <>
            <div>{String(valueRef.current)}</div>
            <button
                onClick={() => {
                    valueRef.current = !valueRef.current;
                    console.log(valueRef.current);
                }}
            >
                改变Ref保存的值
            </button>
        </>
    );
};

运行效果如下，可以看到日志显示 ref 保存的值已经改变了，但是在页面上并没有更新，不像 useState 会主动通知页面重新渲染，所以不要在 useState 的依赖项使用 useRef 保存的值，新手很容易犯这个错误