This is the 22nd day of my participation in the August More Text Challenge

📢 Hi, my name is Xiao Cheng. This is a study note about React, about the life cycle of components

📢 Thank you very much for reading

📢 may your life be bright and lovely

The introduction

React provides us with some lifecycle hook functions that allow us to do things in the hook function during important phases of React execution. So what are the hook functions in the React lifecycle? Let’s summarize

React lifecycle

The React lifecycle consists of three phases: initialization phase, update phase, and destruction phase

Initialization phase

1. The constructor is carried out

Constructor is performed only once when a component is initialized

Usually it’s used to do both of these things

  1. Initialize the inside of the functionstate
  2. Binding function
constructor(props) {
    console.log('Enter constructor');
    super(props)
    this.state = { count: 0}}Copy the code

Instead of using the constructor property, we now use a class-plus arrow function approach to replace constructor

For example, we can initialize state like this

state = {
	count: 0
};
Copy the code

2. Static getDerivedStateFromProps implementation (new hook)

This is one of two new hooks in the React release, and is said to be rarely used.

GetDerivedStateFromProps is called both during initialization and update, and is called before the Render method, which returns an object to update the state

GetDerivedStateFromProps is a directly bound static method on the class that takes two arguments, props and state

Props is the value to be substituted for state, and state is the current value before it was substituted

Note: The value of state is dependent on the props passed in at any time and does not change

The following

static getDerivedStateFromProps(props) {
    return props
}
ReactDOM.render(<Count count="109"/>.document.querySelector('.test'))
Copy the code

The value of count doesn’t change. It’s always 109

2. ComponentWillMount implementation (soon to be scrapped)

Life Cycle componentWillMount will not be executed if getDerivedStateFromProps and getSnapshotBeforeUpdate are present.

This method is called only once at mount time, indicating that the component is about to be mounted, and before the Render method.

This method will be deprecated in React 18. The React async mechanism may cause bugs if abused

3. The render

The Render () method is a mandatory method in the component to render the DOM, but it doesn’t actually manipulate the DOM, it just returns what it needs.

The implementation of DOM rendering is reactdom.render ()

Note: Avoid using setState in render, otherwise it will loop forever

4. ComponentDidMount execution

Execution of componentDidMount means that the initial mount operation is almost complete, and it is used to do something after the component has been mounted

The mount completion refers to the component being inserted into the DOM tree

Initialization phase summary

Constructor -> getDerivedStateFromProps or componentWillMount -> Render -> componentDidMount

Update the stage

The process of the new life cycle is documented here

1. GetDerivedStateFromProps execution

Execute the life cycle getDerivedStateFromProps, and the value returned is used to merge the state to generate a new state.

2. ShouldComponentUpdat execution

ShouldComponentUpdate () is called before the component is updated. It returns a value to control whether the component is updated or not, allowing updates to return true and not updating otherwise

3. The render

In the function that controls updates, render is executed only if it returns true to get the latest React element

4. GetSnapshotBeforeUpdate execution

Called before the last render output is committed, that is, when it is about to be mounted

React is equivalent to a snapshot of taobao shopping, which preserves the product content before placing an order. React is equivalent to the status before updating

It allows the component to capture some information (such as scroll position) before the DOM is actually updated, and any values returned by this lifecycle are passed as arguments to componentDidUpdate(). If no value needs to be passed, return NULL

5. ComponentDidUpdate execution

Components are called immediately after they are updated, not the first rendering

To this update phase is over, in the React in the old version, there are two hooks functions related to the updated componentWillReceiveProps and componentWillUpdate is abandoned

I don’t know much about componentWillReceiveProps

ComponentWillUpdate is executed before Render to indicate that the component is about to be updated

Destruction of phase

ComponentWillUnmount perform

Called when a component is about to be uninstalled or destroyed.

conclusion

Initialize the

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

update

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

The destruction

  • componentWillUnmount()

Learn React, do not have a deep understanding of the life cycle, can only roughly know when to trigger which hook, hope you big guy more advice, any suggestions can be put forward 🙏