这是我在 React 中经常遇到的问题。该componentDidMount方法保证在第一次渲染组件时被触发，因此它似乎是进行 DOM 测量（如高度和偏移量）的自然场所。但是，在组件生命周期的这一点上，我多次收到错误的样式读数。该组件是在DOM，当我与调试器打破，但它尚未在屏幕上绘制。大多数情况下，宽度/高度设置为 100% 的元素都会出现这个问题。当我进行测量时componentDidUpdate- 一切正常，但此方法不会在组件的初始渲染时触发。
所以我的问题是 - 什么时候componentDidMount触发，因为在所有浏览器绘制完成后它显然没有被触发。
编辑： 此 Stackoverflow 问题涉及同一主题：
它还引用了这个 github 对话，解释了会发生什么
在react组件树中，componentDidMount()在所有子组件也已安装后触发。这意味着，任何组件componentDidMount()都在其父组件被挂载之前被触发。
所以如果你想测量 DOM 位置和大小等，使用componentDidMount()子组件是一个不安全的地方/时间来做到这一点。
在您的情况下：要从 100% 宽度/高度组件中获得准确读数，进行此类测量的安全位置将componentDidMount()在顶部react组件的内部。
100% 是相对于父/容器的宽度/高度。因此，也只能在安装了父级之后才能进行测量。
您可能知道，componentDidMount在初始渲染后立即触发一次。
由于您正在进行测量，因此您似乎还希望componentDidUpdate在组件更新时您的测量发生变化时也触发您的测量。
请注意，componentDidUpdate初始渲染不会发生这种情况，因此您可能需要两个生命周期事件来触发您的测量处理。查看第二个事件是否为您触发，以及它是否具有不同的测量值。
在我看来，您应该避免使用setTimeout或requestAnimationFrame在可能的情况下。
它仅在组件安装时调用一次。这是执行异步请求以从 API 获取数据的最佳时机。获取的数据将存储在内部组件状态中，以在 render() 生命周期方法中显示它。
简单：它在渲染函数之后运行
如果您想响应 DOM 中挂载的内容，最可靠的方法是使用ref callback。例如：
render() {
return (
<div
ref={(el) => {
if (el) {
// el is the <div> in the DOM. Do your calculations here!
}
}}
></div>
);
}
您可以尝试componentDidMount()使用requestAnimationFrame(). 逻辑应该发生在下一次绘制之后。
但是，我们需要更多地了解您的代码才能了解为什么节点没有被绘制。我从来没有遇到过这个问题。componentDidMount()在 dom 节点添加到页面后立即触发，但不一定在它们被绘制之后触发。