Javascript 为什么引用值在useEffect中正确，但在组件体中为空

这可能很琐碎，但我正在寻找一个合适的答案：

为什么

someRef

在

useffect

中可用，而它的

null

在

Child

正文中可用

怎么可能呢

尤其是当组件不重新渲染时。看起来

useffect

是组件上的抽象层吗？听起来很可笑

const{useState，useRef}=React；
常量Child=（{someRef}）=>{
console.log（'body'，someRef）；
React.useffect（（）=>{
console.log（'hiya'，someRef）；
}，[someRef]）；
console.log（'body'，someRef）；
返回null；
}
常量应用=（）=>{
const someRef=useRef（null）；
返回(
文本1
);
};
render（，document.getElementById（“根”））
在
应用程序第一次完全呈现并创建HTMLElements之前，ref不会被分配到。当组件首次安装在应用程序中时，在初始安装周期完成之前，最初不会定义绑定到元素的任何引用。这就是为什么
Child
中的
useffect
正确地显示填充了
的ref

您不需要等待
someRef
在Child中更改（而且您不应该，因为ref对象无论如何都不会更改）-您只需要等待初始装载完成。这也会起作用：

const Child = ({ someRef }) => {
  React.useEffect(() => {
     console.log('hiya', someRef);
  }, []);

你可以想到

<div ref={someRef}>



有点像

<div onThisElementInsertedIntoDOM={function() { someRef.current = this; }}

这是一个渲染顺序问题。它正在调用console.log（'body'，someRef）在装载之前，然后
useffect
在装载之后运行。请稍候。那么，当调用第一个
console.log
时，子
组件还没有装入？怎么可能呢？当您在
子函数体中记录
someRef
时，整个
及其呈现的所有内容都没有插入到DOM中。ref仅在所有组件主功能体运行后，在安装完成后才分配给。因此，当调用
控制台.log
时，将安装
子功能体，但整个安装过程尚未完成，对吗？这也意味着
useffect
有点异步？只有在整个安装过程完成后才能运行。同意吗？在其函数体运行时，子对象还没有挂载-它还不在DOM中。如果您熟悉类组件，那么ref被分配到的时间与componentDidMount之前的时间类似。是的，插入到DOM中的元素和
useffect
略微异步。我想你大概知道了。这就是我的想法。谢谢你把事情说清楚。