Question

这是我对React的一个反复出现的问题。保证在第一次渲染组件时触发componentDidMount方法，因此它似乎是一个自然的地方，可以进行高度和偏移等DOM测量。但是，很多时候我在组件生命周期的这一点上收到了错误的样式读数。当我打破调试器但是它还没有在屏幕上绘制时，DOM中的组件是。我的问题是宽度/高度设置为100％的元素。当我在componentDidUpdate中进行测量时 - 一切正常，但此方法不会在组件的初始渲染时触发。

所以我的问题是 - 究竟是componentDidMount被解雇了，因为在完成所有浏览器绘制后它显然没有被解雇。

修改 This Stackoverflow issue涉及同一主题：

它还引用this github conversation来解释发生的事情

Answer 1

在反应组件树中，componentDidMount()在安装了所有子组件后触发。这意味着，任何组件的componentDidMount()在其父级已挂载之前会被解雇。

因此，如果您想测量DOM位置和大小等，使用子组件的componentDidMount()是一个不安全的地方/时间。

在您的情况下：要从100％宽度/高度组件获得准确读数，可以在顶部的componentDidMount()内进行此类测量的安全位置反应成分。
100％是相对于父/容器的宽度/高度。因此，只有在父装置安装完毕后才能进行测量。

Answer 2

如您所知，componentDidMount仅在初始渲染后立即触发一次。

由于您正在进行测量，您似乎还希望在componentDidUpdate时触发测量，以防您的组件更新时测量值发生变化。

请注意，初始渲染不会出现componentDidUpdate，因此您可能需要两个生命周期事件来触发测量处理。查看此第二个事件是否会触发您，以及它是否有不同的测量值。

在我看来，您应该尽可能避免使用setTimeout或requestAnimationFrame。

React Lifecycle Reference

Answer 3

如果您想要响应DOM中挂载的内容，最可靠的方法是使用ref callback。例如：

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}

Answer 4

在安装组件时仅调用一次。这是执行异步请求以从API提取数据的最佳时机。提取的数据将被存储在内部组件状态中，以在render（）生命周期方法中显示它。

简单：它在渲染功能后运行

Answer 5

您可以尝试使用componentDidMount()延迟requestAnimationFrame()中的逻辑。在下一次绘制之后，应该出现逻辑。

但是，我们需要了解有关您的代码的更多信息，以了解未绘制节点的原因。我从未遇到过这个问题。将dom节点添加到页面后立即触发componentDidMount()，但在绘制它们之后不一定会触发。

什么时候`componentDidMount`被解雇？

5 个答案: