reactjs - `componentDidMount` 到底是什么时候被触发的？

Question

这是我在使用 React 时经常遇到的问题。 componentDidMount 方法保证在组件第一次渲染时被触发，因此它似乎是进行 DOM 测量(如高度和偏移量)的自然位置。然而，很多时候我在组件生命周期的这个阶段收到错误的样式读数。当我使用调试器中断时，组件位于 DOM 中，但尚未绘制在屏幕上。我遇到这个问题的原因主要是宽度/高度设置为 100% 的元素。当我在 componentDidUpdate 中进行测量时 - 一切正常，但此方法不会在组件的初始渲染时触发。

所以我的问题是 - componentDidMount 到底什么时候被触发，因为在所有浏览器绘制完成后它显然没有被触发。

编辑: This Stackoverflow issue涉及同一主题:

它还引用了this github conversation这解释了会发生什么

Answer 1

在 React 组件树中，在挂载所有子组件后会触发 componentDidMount() 。这意味着，任何组件的 componentDidMount() 都会在其父组件安装之前被触发。

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

在您的情况下:要从 100% 宽度/高度组件中获得准确的读数，进行此类测量的安全位置应位于 top< 的 componentDidMount() 内/em> react 组件。
100% 是相对于父级/容器的宽度/高度。因此，只有在安装了父级之后才能进行测量。