React Principle lifecycle

Life cycle:

The following code is for several component changes, run the print to see the life cycle execution order:

First render execution order:

Modify child component content:

Modify the content of the parent component

Hide child components:

The above cases basically cover all the usual component updates. The life cycle functions of each case are render and getDerivedStateFromProps.

Static getDerivedStateFromProps() : As the name implies, gets the state derived from props. Static method, we don’t get this

Static getDerivedStateFromProps(props, state) {console.log(" child getDerivedStateFromProps method execution "); static getDerivedStateFromProps(props, state) {console.log(" child getDerivedStateFromProps method execution "); return { fatherText: props.text } }Copy the code