React: Concept: Component Lifecycle

 28th February 2021 at 11:04am

组件生命周期。

React 文档 提供了详细的调用顺序。这个 图表 直观地显示了这个过程，注意其中 React 更新 DOM 及 refs 的时机。

最重要的是 render 方法。除此之外最常用的是 componentDidMount 及 componentWillUnmount，重点是：

  • componentDidMount：第一次调用完 render()，更新 DOM 及 refs 后触发
  • componentWillUnmount：在组件从 DOM 上被移除后触发

为啥是 componentWillUnmount 而不是 componentDidUnmount？

因为如果组件已经（did）unmount，那组件已经被销毁，绑定在组件上的 clean up 代码也就无从做起。