在 React 中创建不使用 useRef 的 ref 与使用 useRef 有什么区别？

Question

我一直在使用 React，我试图理解使用 useRef 创建引用和不使用 useRef 创建引用之间的区别。我已经实现了带有按钮的简单计数器应用程序的两个版本。在第一个版本中，我手动创建引用对象而不使用 useRef，而在第二个版本中，我使用 useRef 来创建引用。

需要社区澄清：

1. 我们应该使用 useRef 而不是简单的 JavaScript 对象有什么具体原因吗？
2. useRef 在 React 组件中对我们有什么好处？

不使用useRef的参考

import { useEffect, useState } from "react";
const REF = { current: undefined };

function App() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log(REF);
    }, [count]);

    return (
        <>
            <h1>{count}</h1>
            <button
                ref={REF}
                onClick={() => setCount((c) => c + 1)}
            >
                +
            </button>
        </>
    );
}

使用 useRef 进行参考

function App() {
    const [count, setCount] = useState(0);
    const REF = useRef();
    useEffect(() => {
        console.log(REF);
    }, [count]);

    return (
        <>
            <h1>{count}</h1>
            <button
                ref={REF}
                onClick={() => setCount((c) => c + 1)}
            >
                +
            </button>
        </>
    );
}

Answer 1

跨渲染的稳定性： 不使用 useRef：在每次渲染时都会重新创建一个普通对象 ({ current: undefined })，因此它不会持续存在。 使用 useRef：useRef 返回一个稳定的对象，在渲染中保持不变。

自动 DOM 绑定： 不使用 useRef：React 不会自动将 .current 设置为 DOM 元素，因此 REF.current 不会可靠地指向按钮。 使用 useRef：React 将 REF.current 设置为 DOM 元素，使其能够可靠地进行 DOM 访问。

重新渲染： 不使用useRef：对象不稳定，这可能会导致不必要的重新渲染。 使用 useRef：当 .current 更改时，useRef 不会触发重新渲染，这使得它非常适合不影响渲染的可变数据。 简而言之：useRef 是为 DOM 元素创建稳定、持久且与 React 兼容的引用的正确方法。

总结 使用 useRef 对于在 React 中创建稳定引用至关重要，因为它：

创建一个在渲染过程中持续存在的对象，这与手动创建 { current: undefined } 不同。

与 React 的 ref 系统集成，使 REF.current 成为引用 DOM 元素的可靠方式。

允许可变值持续存在而不导致重新渲染，这对于需要持续存在的非状态数据来说是理想的选择，就像本例中的按钮元素一样。

在 React 中几乎所有需要引用的情况下，使用 useRef 是正确且可靠的方法。