[React] Simplified life cycle, easy to understand the execution order and their respective roles

The following articles have been simplified for everyone to understand and learn easily; I also hope that everyone will be patient with learning.

1. Life cycle

Everything has its own life cycle, just like riding a car, there will always be a starting point---passing---end point      

---

1. The starting point        constructor

Constructor

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

• You can not write constructorit, once it is written constructor, it must be written in this functionsuper()

• At this point, the component has its own, and keywords thiscan be used in the global of the componentthis

• Otherwise, if you just constructordon't execute super()it, then everything in the future will thisbe wrong.

---

2. Via        componentWillMount

Fired when the component is about to mount

---

3. Via        render

The most important part is to write the elements of the page in it

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

---

4. Via        componentDidMount

After the component is loaded, this life cycle method should be used the most. It is generally used to initialize data after entering the page.

---

5. The end point        componentWillUnmount

Called directly before the component is unloaded and destroyed; the following can be done:

(1) Clear the timer

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

(2) Unbind the dom event

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

(3) Clear the network status

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

---

2. Component life cycle

---

1. The starting point        componentWillReceiveProps

Executed when props change

(1) The component will not be executed when it is first rendered

(2) In this function, the old attributes can still be obtained this.propsthrough

(3) This function can be used as an opportunity to update the state before render() renders after the prop is passed in as react. That is, you can update your component state by calling this.setState() according to the change of the property. Calling this.setState() in this function will not cause the second rendering

---

2. Via        shouldComponentUpdate

The default return value of this lifecycle hook function trueis to update the view if it is true. To optimize performance, when the value to be changed in a state is the same as the value of the original state, the view does not need to be updated, so the performance is better.

---

3. Via        componentWillUpdate

Fired when the component is about to update data

componentWillUpdate(newProps,newState,newContext)

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

---

4. Via        render

The most important part is to write the elements of the page in it

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

---

5. Via        componentDidUpdate

Fired when the component data update is complete

componentDidUpdate(newProps,newState,Snapshot)

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

---

6. End point        componentWillUnmount

Called directly before the component is unloaded and destroyed; the following can be done:

(1) Clear the timer

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

(2) Unbind the dom event

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

(3) Clear the network status

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

---