Reactjs React钩子：为什么useRef钩子的.current为空？

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

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

函数应用程序（）{
const-observed=useRef（null）；
console.log（观察到的、当前的）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
Ref.current
为空，因为函数返回并呈现内容后才设置Ref。每次传递给它的数组内容值发生变化时，钩子都会触发。通过在数组中传递
观察到的
并将记录观察到的
的回调传递到控制台，useEffectok可以用来完成您的任务

useffect（（）=>{
console.log（观察到的、当前的）；
}，[观察]；

编辑：这只在第一次渲染时有效，因为对引用的更改不会触发重新渲染。但是关于useEffect的常规语句仍然有效。如果要观察对dom元素引用的更改，可以使用

{console.log（el）；observed.current=el；}}//或setState（el）
className=“应用程序”
>

在
console.log
发生时，
ref
尚未设置。请尝试将
console.log
放入
useffect
钩子中，它将按照您的意愿工作

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const observed = useRef(null);

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

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

import React，{useRef，useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const-observed=useRef（null）；
useffect（（）=>{
console.log（观察到的、当前的）；
}，[观察]；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
这就是我最后做的事情，因为在
rlvRef
上调用
useffect
并没有捕获所有事件

const rlvRef = useRef()
const [refVisible, setRefVisible] = useState(false)

useEffect(() => {
  if (!refVisible) { 
    return
  }
  // detected rendering
}, refVisible)

return (
  <RecyclerListView
    ref={el => { rlvRef.current = el; setRefVisible(!!el); }}
    ... 
  />
)

const rlvRef=useRef（）
常量[refVisible，setRefVisible]=useState（false）
useffect（（）=>{
如果（！refVisible）{
返回
}
//检测到的渲染
}，refVisible）
返回(
{rlvRef.current=el；setRefVisible（！！el）；}
... 
/>
)
非常感谢！我非常了解挂钩，但是对于一个功能组件，我会假设整个函数都是“渲染函数”。您是否可以参考我在渲染函数中可以做和不能做的事情？“您必须检查
useEffect挂钩中的值”-这句话严格来说不是真的，我可以有一个可以访问ref的记忆回调函数。主要的一点是ref是空的，因为UI还没有实际呈现，
useffect
在这里工作，因为
useffect
它相当于
componentDidMount
和在组件已呈现。@Jame更改了文本，对未来的读者来说应该更清晰。@AvinKavish edit看起来更好：）Xen_mar check out我认为useEffect将只运行一次，因为即使观察到当前的更改，观察到的也不会更改。这就是useRef的要点。“返回的对象将在组件的整个生命周期内保持。”非常有效。其他答案都不适用于我。无法分配给“current”，因为它是只读属性