useRef传入对象时控制台日志异常的原因咨询

第一段代码（符合预期的情况） #

import { useEffect, useRef } from "react";
export default function Test() {
    const testRef = useRef(0);

    useEffect(() => {
        console.log(testRef);
        testRef.current = 1;
        console.log(testRef);
    }, []);

    return <div></div>;
}

对应的控制台日志：

{ current : 0 }
{ current : 1 }

这段结果符合预期，第一次打印时testRef.current是初始值0，更新后打印为1。

第二段代码（出现疑问的情况） #

import { useEffect, useRef } from "react";
export default function Test() {
    const testRef = useRef({
        num: 0,
    });

    useEffect(() => {
        console.log(testRef);
        testRef.current.num = 1;
        console.log(testRef);
    }, []);

    return <div></div>;
}

对应的控制台日志：

{ current : 1 }
{ current : 1 }

问题解析 #

这不是React的bug，而是浏览器控制台的引用特性导致的：

• 打印基础类型（数字、字符串等）时，控制台会直接输出当前值的快照，所以能看到前后变化。
• 打印引用类型（对象、数组）时，控制台只是记录该对象的引用，不会立即生成快照。当你后续点击展开查看日志时，对象已经被代码修改为num:1，所以看到的是更新后的状态，而非打印瞬间的初始值。
• 如果想查看打印瞬间的真实状态，可以通过克隆对象生成快照，比如用console.log(JSON.parse(JSON.stringify(testRef)))。

内容的提问来源于stack exchange，提问作者Ashwin Bhargava