【React学习笔记】React生命周期梳理（16.X前后两种）

检查

检查组件中是否有默认的属性、是否有属性校验

constructor

开始执行constructor构造函数（?‍?讲解：constructor是生命周期的一部分。react.component就是一个抽象类，官方文档就是这么定义的。）

构造类。在这里可以写一些状态可以进行ajax数据请求

componentWillMount

执行componentWillMount生命周期函数。此时组件即将挂载到页面上。（类似vue的beforeMounte）会有关于componentWillMount更名的信息提示

可以进行ajax请求「（但是react官方不建议。因为可能后期会使用react Native时会与之发生冲突。而且官方特强硬的把这个周期函数给移除了。16.3版本以后移除了）」也可以setState一下

render

执行render函数渲染页面。

没必要进行ajax请求「不能调用setState，否则会死循环。因为setState会触发shouldComponentUpdate，触发后如果返回true，又会走到render里。所以，render里只做数据渲染、展示就行，别进行setState」

componentDidMount

执行componentDidMount生命周期函数。此时组件已经被挂载到页面中。（类似vue的mounted）

可以发送ajax、设置状态（setState）的「最好的地方」

进行提问是否继续？

触发「shouldComponentUpdate」函数。提问组件是否要进行更新。该函数接收两个参数：nextProps、nextStates该函数需要返回布尔值来「回答」是否更新：return false不更改 - 流程回到state被更改前。return true进行更改 - state更改，流程继续。

可以在参数里边知道将要更新的值「可以比较值，发现需要更改的值与更改前后一致时，返回false，不触发更新。」因为react没有vue那么智能，不知道要更改的内容是否真的发生了改变。「只要setState就会触发更新、只要触发了更新就会走剩下的流程。还会去对比虚拟dom、耗费性能 。其内部的子组件的生命周期也会触发一遍。」shouldComponentUpdate(nextProps,nextStates){return nextStates.count !== this.state.count}

【回答】：是

componentWillUpdate

执行conponentWillUpdate生命周期函数。告知组件即将开始进行更新。

千万不能设置状态，因为会又回到shouldComponentUpdate的死循环中。没必要做ajax请求，即使做了也不能重新setState基本上没什么用

render

组间更新完毕，执行render函数重新渲染页面。

（同上边的render。）

componentDidUpdate

执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。

千万不能设置状态，因为会又回到shouldComponentUpdate的死循环中。没必要做ajax请求，即使做了也不能重新setState基本上没什么用

【往复】：回到组件运行状态（等待）

【循环】：重走state值被更改的流程如下：

进行提问是否继续？

触发shouldComponentUpdate函数。提问组件是否要进行更新。该函数接收两个参数：nextProps、nextStates该函数需要返回布尔值来「回答」是否更新：return false不更改 - 流程回到state被更改前。return true进行更改 - state更改，流程继续。

【回答】：是

componentWillUpdate

执行conponentWillUpdate生命周期函数。告知组件即将开始进行更新。

「在16.3以后的版本中移除了」

render

组间更新完毕，执行render函数重新渲染页面。

componentDidUpdate

执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。

【往复】：回到组件运行状态（等待）

【销毁】：组件销毁完毕。

检查

检查组件中是否有默认的属性、是否有属性校验

constructor

开始执行constructor构造函数（?‍?讲解：constructor是生命周期的一部分。react.component就是一个抽象类，官方文档就是这么定义的。）

构造类。在这里可以写一些状态可以进行ajax数据请求（要不要在constructor里获取数据）

static getDerivedStateFromProps(props,state)

执行一个静态的方法。从属性中去获得状态**。**「初始化就会执行」「这样，更改state和更改props，就不会走两套路线了，而是都走这一个。」「必须返回一个state的对象。否则报错如下」Warning: Father.getDerivedStateFromProps(): A valid state object (or null) must be returned. You have returned undefined.「return的返回值，就会放到组件的state状态中」 参数：props、state，就是当前组件的属性状态值和属性值

render

执行render函数渲染页面。

没必要进行ajax请求「不能调用setState，否则会死循环。因为setState会触发shouldComponentUpdate，触发后如果返回true，又会走到render里。所以，render里只做数据渲染、展示就行，别进行setState」

componentDidMount

执行componentDidMount生命周期函数。此时组件已经被挂载到页面中。（类似vue的mounted）

可以发送ajax、设置状态（setState）的「最好的地方」

进行提问是否继续？

触发shouldComponentUpdate函数。提问组件是否要进行更新。该函数接收两个参数：nextProps、nextStates该函数需要返回布尔值来「回答」是否更新：return false不更改 - 流程回到state被更改前。return true进行更改 - state更改，流程继续。

可以在参数里边知道将要更新的值「可以比较值，发现需要更改的值与更改前后一致时，返回false，不触发更新。」因为react没有vue那么智能，不知道要更改的内容是否真的发生了改变。「只要setState就会触发更新、只要触发了更新就会走剩下的流程。还会去对比虚拟dom、耗费性能 。其内部的子组件的生命周期也会触发一遍。」shouldComponentUpdate(nextProps,nextStates){return nextStates.count !== this.state.count}

【回答】：是

render

组件更新完毕，执行render函数重新渲染页面。

（同上边的render。）

getSnapshotBeforeUpdate(prevProps,prevState)

执行这个函数，获取之前状态的一个快照。「需要有返回值。其返回值供下边的钩子函数componentDidUpdate中接受并使用。」「所以该函数必须和componentDidUpdate函数写在一起。」

componentDidUpdate

执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。「可支持接受三个参数。分别是prevProps、prevState、snapShot」「其中，snapShot是getSnapshotBeforeUpdate的返回值」**

千万不能设置状态，因为会又回到shouldComponentUpdate的死循环中。没必要做ajax请求，即使做了也不能重新setState基本上没什么用

【往复】：回到组件运行状态（等待）

【销毁】：组件销毁完毕。