React生命周期学习笔记

React生命周期学习笔记
一、对生命周期的理解
1)组件对象从创建到死亡经历特定的生命周期阶段。
2)React组件对象包含一系列的钩子函数(生命周期回调函数), 在生命周期特定时刻回调。
3)我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作。
二、生命周期流程图

【注】调用生命周期函数的情况大致分为两种：
1、初始化；
2、更新：
(1)父组件的state改变导致父组件render（）；
(2)自身state被改变进行主动更新；
(3)被强制更新，forceUpdate（）。
三、生命周期详述
1)组件的三个生命周期状态:
* Mount：插入DOM容器之中
* Update：更新被重新渲染
* Unmount：被移出真实DOM
2)React 为每个状态都提供了钩子(hook)函数
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
3)生命周期流程:
a.第一次初始化渲染显示: ReactDOM.render()
* constructor(): 创建对象初始化state
* componentWillMount() : 将要插入回调
* render() : 用于插入虚拟DOM回调
* componentDidMount() : 已经插入回调
b.每次更新state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
c.移除组件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 组件将要被移除回调
四、特殊函数
1)render(): 初始化渲染或更新渲染调用
2)componentDidMount(): 开启监听, 发起网络请求
3)componentWillUnmount(): 做一些收尾工作
4)componentWillReceiveProps():在父组件render的时候，props被改变，这时候组件内部会收到父组件传回来的props。可以去根据新的props更新自己state。

五、后续

在新版react的生命周期中简化了钩子函数，用一个 static getDeriveredStateFromProps()这样一个静态方法将之前的willXxx()钩子函数全都替代了（没有深入研究。）