43

这是我在使用 React 时反复出现的问题。该componentDidMount方法保证在第一次渲染组件时被触发，因此它似乎是进行 DOM 测量（如高度和偏移）的自然场所。但是，在组件生命周期的这个阶段，我多次收到错误的样式读数。该组件在DOM 中，当我与调试器中断时，它还没有在屏幕上绘制。对于宽度/高度设置为 100% 的元素，我遇到了这个问题。当我进行测量时componentDidUpdate- 一切正常，但此方法不会在组件的初始渲染时触发。

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

编辑： 这个 Stackoverflow 问题涉及相同的主题：

它还引用了这个解释发生了什么的github 对话

4

5 回答 5

44

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

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

在您的情况下：要从 100% 宽度/高度组件中获得准确的读数，进行此类测量的安全位置将componentDidMount()位于顶部反应组件的内部。
100% 是相对于父容器/容器的宽度/高度。因此，也只能在安装父级之后进行测量。

于 2016-03-17T09:44:38.653 回答
7

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

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

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

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

反应生命周期参考。

于 2016-03-17T02:43:33.860 回答
5

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

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

于 2018-09-27T07:37:27.597 回答
2

如果你想响应 DOM 中挂载的东西，最可靠的方法是使用ref 回调。例如：

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}
于 2017-01-27T23:13:25.907 回答
0

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

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

于 2016-03-17T02:49:25.707 回答