React中手动创建Ref与使用useRef创建Ref的区别

嘿，我来帮你把这两者的差异掰扯清楚，你的两个问题问到了React ref机制的核心点，咱们一步步说：

1. 为什么一定要用useRef，而不是自己手动建个JS对象？ #

最关键的问题在于实例隔离和生命周期一致性：

• 你手动创建的REF = { current: undefined }是定义在组件外部的全局变量，这意味着如果你的App组件被渲染多次（比如在页面上放两个<App/>），所有组件实例都会共享同一个REF对象！这会导致极难排查的bug——比如点击其中一个按钮，另一个组件的ref可能会被意外覆盖。
• 另外，React不会对这个手动对象做任何生命周期管理：当组件卸载时，手动对象的current属性不会被自动清空，可能会残留对已卸载DOM元素的引用，引发内存泄漏。

2. useRef到底给我们带来了哪些好处？ #

useRef是React专门为组件内部的可变值存储设计的Hook，核心优势有这些：

• 组件实例专属：每次组件被实例化时，useRef都会返回一个全新的、独立的ref对象，多个组件实例之间不会互相干扰。
• 生命周期稳定：这个ref对象会在组件的整个生命周期内保持不变，不管组件重新渲染多少次，它的引用都不会变，你可以放心地用它存储需要跨渲染周期保留的值（比如定时器ID、之前的状态值等）。
• 自动配合React的DOM管理：当你把useRef创建的ref绑定到DOM元素上时，React会自动在组件挂载时把DOM元素赋值给current，卸载时清空current，避免内存泄漏。
• 修改不触发重渲染：和useState不同，修改ref.current的值不会导致组件重新渲染，这在你需要存储一些不需要触发UI更新的可变值时特别有用。

手动创建Ref的示例代码 #

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创建Ref的示例代码 #

import { useEffect, useState, useRef } from "react";

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>
        </>
    );
}

备注：内容来源于stack exchange，提问作者Kunal Thakur