ref 对象第一次有值，但是 ref.current 为 null

Question

有人可以解释一下这种行为吗？ ref 对象第一次有值，但是 ref.current 是 null 是怎么回事？实际上，第二部分 (ref.current = null ) 是我已经知道的，但第一部分令人惊讶。

export default function App() {
  const [state, setState] = React.useState(0);
  const ref = React.useRef<HTMLButtonElement>(null);
  console.log(ref); // output: {current: HTMLButtonElement}
  console.log(ref.current); // output: null for the first time
                            // output: <button>click</button> after changing the state

  return (
    <div>
      <button onClick={() => setState(state + 1)} ref={ref}>
        click
      </button>
    </div>
  );
}

似乎不知何故，ref，指的是类似接口的东西，但 ref.current 指的是值本身

Answer 1

How is it that ref object has value for the first time

没有。在命中日志语句时，该对象实际上是 { current: null }。为了证明这一点，将行更改为：

console.log(JSON.stringify(ref));

对象看起来有值的原因是开发者工具只有在您在开发者工具中点击它时才会计算对象，并且那时它有值。

ref 对象第一次有值，但是 ref.current 为 null

ref object has value for the first time, but ref.current is null

reactjs

use-ref