`componentDidMount` 究竟是什么时候触发的？

Question

这是我在使用 React 时经常遇到的问题。 componentDidMount 方法保证在第一次渲染组件时触发，因此它似乎是进行 DOM 测量（例如高度和偏移量）的自然位置。然而，很多时候我在组件生命周期的这一点上收到错误的样式读数。组件 是 DOM 中的 ，当我中断调试器时，它还没有绘制在屏幕上。大多数情况下，width/height 设置为 100% 的元素都会出现此问题。当我在 componentDidUpdate 中进行测量时 - 一切正常，但此方法不会在组件的初始渲染时触发。

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

编辑： This Whosebug issue 处理同一主题：

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

Answer 1

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

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

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

我认为您应该尽可能避免使用 setTimeout 或 requestAnimationFrame。

React Lifecycle Reference.

Answer 2

您可以尝试在 componentDidMount() 和 requestAnimationFrame() 中延迟逻辑。逻辑应该发生在下一次绘制之后。

但是，我们需要了解更多关于您的代码的信息，才能了解为什么没有绘制节点。我从来没有遇到过这个问题。 componentDidMount() 在 dom 节点添加到页面后立即触发，但不一定在它们被绘制后触发。

Answer 3

在 React 组件树中，componentDidMount() 在所有子组件也已安装后触发。这意味着，任何组件的 componentDidMount() 在其父组件被安装 .

之前被触发
因此，如果您想测量 DOM 位置和大小等，使用子组件的 componentDidMount() 是不安全的地方/时间来执行此操作。

在您的情况下：要从 100% width/height 组件获得准确读数，进行此类测量的安全位置是 [=20= 的 componentDidMount() 内]top react 组件.
100% 是相对于父级/容器的 width/height。所以只有在父级也被安装后才能进行测量。

Answer 4

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

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

Answer 5

组件挂载时只调用一次。这是执行异步请求以从 API 获取数据的最佳时机。获取的数据将存储在内部组件状态中以在 render() 生命周期方法中显示它。

简单：它运行在渲染函数之后

`componentDidMount` 究竟是什么时候触发的？

When exactly is `componentDidMount` fired?

reactjs

react-dom