preface

I’ve been a little busy lately.

React lifecycle concepts

As with Vue, the React component is created, updated, and destroyed with various functions. These functions that are fired at a specific time of the component are collectively referred to as the lifecycle functions of the component.

React Lifecycle

The component lifecycle can be divided into three phases, which we describe in turn:

2.1 Components Installation (Mounting

When a component instance is created and inserted into the DOM, these methods are called in the following order:

  • constructor()
  • Static getDerivedStateFromProps() (added after React16)
  • render()
  • componentDidMount()
Constructor ()

There are two main things to do

  1. Assign an object to state to initialize the local state.
  2. Bind event handler methods to instances.
constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}
Copy the code
The static getDerivedStateFromProps () function

This is a new lifecycle function for React, which is used to derive new states from props.

static getDerivedStateFromProps(props, state) {
  console.log(props)
  return props
}
Copy the code

It takes two parameters: the props of the component and the current state, and returns an object to update the state. Note that this object is merged with the original state, or it can return null to say that nothing is being updated.

Render () function

The Render () function is a pure function that returns the React element.

Render () will not be called if shouldComponentUpdate() returns false.

ComponentDidMount () function

ComponentDidMount () is called immediately after mounting the component (inserted into the tree). Initialization of the DOM node that is required should take place here. It’s also used to do two things:

1. A good place for network data interface requests.

2. Add some event subscriptions (don’t forget to unsubscribe in componentWillUnmount())

2.2 Updating of components phase
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
ShouldComponentUpdate (nextProps, nextState) functions

If shouldComponentUpdate() returns false, then componentWillUpdate(), Render (), and componentDidUpdate() will not be called. Here is the code to determine whether the component is re-rendered by the next parameter change (execute the render function)

// Check whether component props are updated
shouldComponentUpdate(nextProps, nextStates){
    returnnextProps.content ! = =this.props.content
}
Copy the code
GetSnapshotBeforeUpdate (prevProps, prevState) functions

GetSnapshotBeforeUpdate () immediately before submitting the latest rendered output to the DOM (that is, my state has been updated, but I have not yet render, I can get some information about the DOM before the update here). It allows your component to capture some information (for example, scroll position) from the DOM before it can change. Any values returned by this lifecycle method are passed as arguments to componentDidUpdate().

ComponentDidUpdate (prevProps, prevState, snapshot) function

ComponentDidUpdate () is called immediately after an update, not initially rendered. The snapshot parameter is the parameter returned by the getSnapshotBeforeUpdate(prevProps, prevState) function.

ComponentDidUpdate () will not be called if shouldComponentUpdate() returns false.

2.3 Components Unmounting (Mounting

ComponentWillUnmount () is the only function executed during component unload.

componentWillUnmount()

ComponentWillUnmount () is called immediately before the component is unmounted and destroyed. Use this method to perform any necessary cleanup, such as invalidating timers, canceling network requests, or clearing all subscriptions created in componentDidMount().

Third, summary

React lifecycle functions are not recommended or will be abolished. In general, just remember the important ones, and know what each of these life cycle functions are for and what problems they solve.