Javascript 在Reactjs中将ref对象分配给目标之前，为什么存在ref对象

我在Reactjs中尝试了

Ref和forwarding Ref

，以保留对DOM或React组件的引用。我不明白为什么创建的

ref对象在呈现或装载目标组件之前保持了正确的目标引用。
我有权提出我的问题的更多细节。这是截图

正如您所看到的，Ref对象保持对目标的正确引用（在本例中是FancyButton组件），即使目标的render和ComponentDidMount方法尚未启动。
有人能帮我进一步了解这件事吗。谢谢。
因为console会保留对对象当前值的引用（所以在渲染后可以得到对象的值）。如果您将代码更改为

console.log(JSON.stringif(ref))

然后您将得到：

]
您在控制台上登录了很多错误的地方，即
console.log（“Fancybutton的呈现”）FancyButton
的渲染方法中以及
FancyHOC
的
forwardRef
函数体中。渲染方法应该是没有副作用的纯函数。控制台日志记录被认为是一种副作用

研究此组件生命周期图：


请注意渲染函数所在的位置。它位于渲染周期的“渲染阶段”。还请注意，它“可能会被React暂停、中止或重新启动”。这意味着在“提交阶段”中的任何操作之前调用它们

现在还要注意，其他组件生命周期方法，特别是
componentDidMount
及其带有空依赖项数组的功能组件coutnerpart
useffect
都是在组件呈现（提交到DOM）至少一次后调用的

修复错误位置的日志记录：

FancyButtonHOC

将日志移动到
componentdiddupdate
和
useffect
hook中

function createFancyButtonHOC(WrappedComponent) {
  class FancyHOC extends React.Component {
    render() {
      const { forwardRef, ...rest } = this.props;
      return <WrappedComponent ref={forwardRef} {...rest} />;
    }
    componentDidMount() {
      console.log("FancyHOC mounted");
    }
    componentDidUpdate() {
      console.log("render of HOC: ", this.props.forwardRef);
    }
  }

  return React.forwardRef((props, ref) => {
    React.useEffect(() => {
      console.log("forwardRef callback:  ", ref);
    });
    return <FancyHOC forwardRef={ref} {...props} />;
  });
}

新控制台日志输出

render of HOC: {current: FancyButton}
fancy button mounted 
FancyHOC mounted 
forwardRef callback: {current: FancyButton}


功能组件中有类。你确定它工作正常吗？谢谢你指出。我想补充一下我的想法。带有ref当前属性的Chrome evaluated console.log命令中的V8引擎为null，但尚未在开发人员工具的控制台选项卡中打印。之后（在V8事件循环中的渲染阶段之后），ref对象的当前属性将使用正确的引用进行更新？如果我错了，请纠正我。我想它是打印出来的，就像你在渲染阶段后说的那样。但是，即使在控制台中呈现，并且在5秒钟之后，该值将更改，那么控制台视图将更新为当前视图。这不是“冻结”，控制台保留对“活动”对象的引用。您是否有任何关于devtool中控制台视图如何工作的链接，与事件循环@Robert有关？我喜欢理解这些事情：）。谢谢你的详细回答。这有助于我更多地了解如何反应work@vietvoquoc欢迎如果您觉得答案和解释有帮助，请也投票。干杯
render of HOC: {current: FancyButton}
fancy button mounted 
FancyHOC mounted 
forwardRef callback: {current: FancyButton}