Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

When we talk about the React component lifecycle, we’re talking about class components, because some of the current thinking is that function components have a life cycle after Hooks are introduced into them

Let’s take a look at the three phases of the life cycle of a class component after Act 16.3: mount, update, and uninstall

Mount the stage

The mount process occurs only once in a component’s lifetime. During this process, the component is initialized and then rendered into the real DOM for “first rendering”.

constructor

Constructor is a generic class constructor that is called only once during the mount phase and is often used to initialize state and bind functions

import React from 'react' class Demo extends React.Component { constructor(props) { super(props); this.state = { name: "nordon" }; this.clickHandler = this.clickHandler.bind(this); }}Copy the code

With the development of technology, few people still do this in constructor these days

Remove constructor cause:

  1. Constructor is the class initialization function that has nothing to do with the React lifecycle
  2. Constructor is not a good place to handle logic other than initialization
  3. The code gets cleaner
import React from 'react'

class Demo extends React.Component {
  state = { name: "nordon" };

  clickHandler = () => {}
}
Copy the code

getDerivedStateFromProps

React 16.3 Lifecycle getDerivedStateFromProps

static getDerivedStateFromProps(props, state)
Copy the code

This allows the component to derive state when the props changes:

  1. When props is passed in
  2. When state changes;
  3. ForceUpdate is called.

render

The JSX structure returned by the Render function describes the specific render content

Since it is a pure function, you should never do anything with it that has side effects, such as calling setState, binding events, etc

componentDidMount

In the browser, when componentDidMount is triggered, we can assume that the interface has been drawn, mainly to handle things like making a request while the component is loaded

Update the stage

getDerivedStateFromProps

Same as mount phase

shouldComponentUpdate

This method determines whether a new render needs to be triggered by returning true or false. Because rendering triggers the last level, it is also a battleground for performance optimization. Prevent unnecessary rendering by adding judgment criteria.

shouldComponentUpdate(nextProps, nextState) {
  Shallow comparisons only compare values and references, not every value in Object
  if (shadowEqual(nextProps, this.props) || shadowEqual(nextState, this.state) ) {
    return true
  }
  return false
}
Copy the code

render

Same as mount phase

getSnapshotBeforeUpdate

This new life cycle covers with componentDidUpdate outdated componentWillReceiveProps all use cases.

The getSnapshotBeforeUpdate method, which works with React’s new asynchronous rendering mechanism, is called before Redner and returns the value as the third parameter to componentDidUpdate.

getSnapshotBeforeUpdate(prevProps, prevState) {
  // todo ...
}
Copy the code

componentDidUpdate

The value returned by getSnapshotBeforeUpdate is passed back as the third parameter

componentDidUpdate(prevProps, prevState, valueFromSnapshot) {
  // The value obtained from getSnapshotBeforeUpdate is valueFromSnapshot
}

Copy the code

Unloading phase

componentWillUnmount

This function is primarily used to perform cleanup. A common Bug is forgetting to cancel the timer in componentWillUnmount, causing timed operations to continue after the component has been destroyed. Therefore, you must unbind the event and cancel the timer at this stage