React Hooks：为什么 useRef Hook 的 .current 为空？

Question

我有一个简单的组件示例：

 function App() {
  const observed = useRef(null);
  console.log(observed.current);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我希望 observed.current 的类型为 element 并且 current 不会为空，而是 div 元素及其所有属性。我的理解是：

1. ref 被初始化为 null
2. Null 被 ref 覆盖

但事实证明， .current 仍然是空的。这很糟糕，因为我想将观察到的传递给需要元素类型参数的函数。

https://codesandbox.io/embed/purple-forest-0460k

原文由 Xen_mar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Ref.current 为空，因为直到函数返回并呈现内容后才会设置 ref。每当传递给它的数组内容的值发生变化时， useEffect 挂钩就会触发。通过在数组中传递 observed 并将记录 observed 的回调传递到控制台，可以利用 useEffect 挂钩来完成您的任务。

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

编辑：这仅适用于第一次渲染，因为对 ref 的更改不会触发重新渲染。但是关于 useEffect 的一般说法仍然成立。如果要观察 dom 元素的 ref 的变化，可以使用 回调作为 ref。

   <div
    ref={el => { console.log(el); observed.current = el; }} // or setState(el)
    className="App"
  >

代码沙箱

原文由 Avin Kavish 发布，翻译遵循 CC BY-SA 4.0 许可协议