【Day25】React Class Component 生命周期简单介绍

在写React的时候其实有分为两种写法

1. Class Component

   • this.state or this.props会改变
   • 较复杂的情境可以使用，因为有比较多的生命周期可以操作

2. Function Component

   • 程序码比较简洁
   • 编译的速度比较快
   • 比较好写测试
   • 架构上要切割乾净 (元件生命周期比较单纯)

这篇我们就要来讲关於Class Component的生命周期啦~

首先，Class Component的生命周期有三种状态

1. Mounting: 页面上已经插入真实的DOM
2. Updating: 页面正在被重新渲染
3. Unmounting: 页面已经移出真实的DOM

再来是React针对这三种生命周期状态提供的Functions (以下是小菜鸟在开发时比较常用的几种)

1. componentWillMount: 在页面被渲染出来前但已经插入真实的DOM後执行
2. componentDidMount: 在页面被渲染出来後执行 (但只会执行一次)
3. componentDidUpdate: 在页面每次被重新渲染後(props或state有更新後)执行
4. componentWillUnmount: 在页面要被销毁时执行

第1~3个都是可以使用this.setState的 (也就是可以在里面更新state)

如果有要进行ajax非同步处理，建议在componentDidMount进行处理，
有时候小菜鸟想先取得一些必须透过ajax问回来的资料，就会在这边进行。

当然，除了上述四个以外，还有其他的生命周期functions，
最最最主要的是建构子，相对於function Component来说，
建构子是Class Component 独特的存在，会直接切一块记忆体来初始化state和父类别的props。

生命周期参考文件 :

上述，是关於Class Component和Function Component的简单比较及Class Component 小菜鸟常用的几个生命周期。

下一篇就要来说明React的另一种写法 => Function Component啦 ୧☉□☉୨