什么时候`componentDidMount`被解雇？

Question

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

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

编辑: 此Stackoverflow问题处理相同的主题:

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

Answer 1

在反应组件树内部,componentDidMount()在安装了所有子组件之后触发.这意味着,在挂载父组件之前componentDidMount()触发任何组件.

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

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

Answer 2

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

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

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

在我看来，您应该避免使用setTimeout或requestAnimationFrame在可能的情况下。

反应生命周期参考。

Answer 3

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

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