React：它如何知道 DOM 组件何时已挂载，以便它可以调用 componentDidMount？答案

【问题标题】：React: How does it know when a DOM compoent has been mounted, so that it can call componentDidMount?React：它如何知道 DOM 组件何时已挂载，以便它可以调用 componentDidMount？
【发布时间】：2019-06-23 19:29:21
【问题描述】：

一般来说，我知道当动态 DOM 元素加载到屏幕上时，我们很难知道或得到通知，例如，没有简单的方法可以知道动态文本框在 DOM 中是否可用并专注于它，除非我们进行某种轮询或执行 0 延迟的 setTimeout，以便它在 DOM 更新已经发生时的下一个滴答中执行。

React 如何知道 DOM 何时更新，以便它可以调用诸如 componentDidMount 或 getSnapshotBeforeUpdate 之类的生命周期方法？它使用 setTimeout hack 吗？

编辑：我了解协调算法的基础知识，cmets 中的链接文档并没有谈论反应如何准确知道浏览器何时创建/更新了 DOM 元素。我知道提交阶段发生在 2 遍。在第一遍中，所有 Host(DOM) 更新都完成了，在第二遍中，相关的生命周期方法被调用（getSnapshotBeforeUpdated 和 componentDidMount），但是由于这 2 遍发生在同一个 function 中，React 怎么知道第一遍中发生的 DOM 更改，在第二遍中是否可用？这些 DOM 更新是同步的吗？如果我访问 componentDidMount 中的 DOM 元素 left 属性，它是对 DOM 完成更新后的新值还是旧值，因为调用 componentDidMount 时浏览器可能没有更新 DOM？

【问题讨论】：

看看这个：reactjs.org/docs/reconciliation.html
@HenryWoody 谢谢，我了解协调是如何工作的，我更感兴趣的是了解 DOM 更新是否是同步的，或者 React 是否有某种方法可以在 DOM 更新后安排相关的生命周期方法。请查看编辑

标签： javascript reactjs settimeout

【解决方案1】：

要更好地了解 React 生命周期方法的工作原理，请查看 this cheatsheet。

对于您的特定情况，我建议检查 DOM 中元素（在本例中为文本框）是否存在。示例：

componentDidMount() {
  if (document.getElementById("ID-of-your-textbox")) {
    //anything that needs the textbox rendered
  }
}

但是，如果您最终得到“我的输入在挂载后尚未立即呈现”，您应该尝试将检查置于componentDidUpdate 方法。示例：

componentDidUpdate() {
  if (document.getElementById("ID-of-your-textbox")) {
    //anything that needs the textbox rendered
  }
}

【讨论】：

是否存在“我的输入在安装后尚未立即呈现”的情况成立？这是为什么？我们不希望组件在 componentDidMount 之后在 DOM 中可用吗？