React: Concept: Component Lifecycle

28th February 2021 at 11:04am
React: Concept

组件生命周期。

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

最重要的是 render 方法。除此之外最常用的是 componentDidMountcomponentWillUnmount,重点是:

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

为啥是 componentWillUnmount 而不是 componentDidUnmount

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