【React】生命周期简化，方便读懂执行顺序和各自作用

以下文章为了大家能简单看懂学习，已做简化；对待学习还希望大家保持耐心

一.生命周期

每件事物都有自己的生命周期，就好比坐车，总会有起点---途经---终点      

---

1.起点        constructor

构造函数

  constructor(props) {
  
    super(props);   super关键字，它指代父类的实例（即父类的this对象）
    
    this.state = {date: 2022};
  }
复制代码

• 可以不写constructor，一旦写了constructor，就必须在此函数中写super()

• 此时组件才有自己的this，在组件的全局中都可以使用this关键字

• 否则如果只是constructor 而不执行super()那么以后的this都是错的

---

2.途经        componentWillMount

组件将要挂载时触发

---

3.途经        render

最重要的一环，就是在里面写入页面的元素

render() { return ( <h1>熊猫开发团队</h1> ); }
复制代码

---

4.途经        componentDidMount

组件加载完成，这个生命周期方法应该是用的最多的，一般用在进入页面后，数据初始化

---

5.终点        componentWillUnmount

在组件卸载及销毁之前直接调用；可以做的事如下：

（1）清除定时器

componentWillUnmount(){
  clearTimeout(this.timer)
}
复制代码

（2）解绑dom事件

componentWillUnmount(){
  window.onScroll = null
}
复制代码

（3）清除网络状态

componentWillUnmount(){
  this.setState = (state,callback) => {
    return
  }
复制代码

---

二.组件生命周期

---

1.起点        componentWillReceiveProps

当props发生变化时执行

（1）组件初次渲染时不会执行

（2）在这个函数里面，旧的属性仍可以通过this.props来获取

（3）此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染

---

2.途经        shouldComponentUpdate

这个生命周期钩子函数默认的返回值是true，如果是true就更新视图，为优化性能，当状某个状态将要改变的值与原状态的值一样时不需要更新视图，这样性能更佳

---

3.途经        componentWillUpdate

组件将要更新数据时触发

componentWillUpdate(newProps,newState,newContext)

-   newProps　　   新的props
-   newState 　    新的State
-   newContext     新的context
复制代码

---

4.途经        render

最重要的一环，就是在里面写入页面的元素

render() { return ( <h1>熊猫开发团队</h1> ); }
复制代码

---

5.途经        componentDidUpdate

组件数据更新完成时触发

componentDidUpdate(newProps,newState,Snapshot)

-   newProps　　   新的props
-   newState 　    新的State
-   Snapshot       由componentWillReceiveProps生命周期返回的快照
复制代码

---

6.终点        componentWillUnmount

在组件卸载及销毁之前直接调用；可以做的事如下：

（1）清除定时器

componentWillUnmount(){
  clearTimeout(this.timer)
}
复制代码

（2）解绑dom事件

componentWillUnmount(){
  window.onScroll = null
}
复制代码

（3）清除网络状态

componentWillUnmount(){
  this.setState = (state,callback) => {
    return
  }
复制代码

---