The life cycle

1. Mount stage

During the component mount phase, the following lifecycle functions are called in sequence.

1.constructor(props)

  • Initialize components
  • Don’t forget to add super

2.static getDerivedStateFromProps(props,state)

  • Mount phase, get the current props and state, and then modify the state according to the props
  • Static method. This method cannot be used internally
  • 16.3 new
  • There must be a return value, which is a modification of state
  • A component must initially define the state property

3.componentWillMount

  • Indicates that the component is about to be mounted
  • You are advised to use UNSAFE_componentWillMount for 17.x instead of 16.3
  • Cannot be used at the same time as getDerivedStateFromProps(props,state)

4.render

  • Generate the virtual DOM with values from the return, and submit it to the ReactDOM to render the real DOM

5.componentDidMount

  • The component has been mounted and the virtual DOM has been added to the real DOM

2. Update phase

The React component update lifecycle functions have three different processes: update the current component caused by the parent, update the current component itself, and forceUpdate

  1. A parent component update causes the current component to update

    1. React 16.3 and later differ from before

    (1) Before React 16.3

    1. componentWillReceiveProps(nextProps)
      • This function is triggered when the child component receives new Props after the parent component is updated. This. Props is the same as the Props before the update
    2. shouldComponentUpdate(nextProps,nextState)
      • Used to determine whether to update the component
      • The props and state are still the data before the update and are obtained using the updated pass parameters
      • There must be a return value, which is a Boolean. True, the life cycle continues downward and components continue to update. When false, component updates are stopped and subsequent lifecycle functions are not called
    3. componentWillUpdate(nextProps,nextState)
      • Indicates that the component is about to be updated
      • The related issues for props and state are described above
    4. render
      • Generate the virtual DOM according to the new props and state. Then compare the new virtual DOM with the old one to find out the update points and update the real DOM
      • The props and state here are updated
    5. componentDidUpdate(prevProps,prevState)

      • Represents that the component has been updated and the real DOM has been rerendered

      • To obtain the props and state before the update, you can use parameters to receive the parameters

      • Processing side effects (requests) : get real DOM nodes, data requests

    React 16.3

    Replace the componentWillReceiveProps React with 16.3 getDerivedStateFromProps method. Since 16.3 the React, componentWillReceiveProps and componentWillUpdate was gradually abandoned, When used in React 17.x they need to be prefixed with UNSAFE_, and the getDerivedStateFromProps method is used, they will not be called again.

    1. static getDerivedStateFromProps(newProps,newState)
      • In the update phase, you can get the new props and state, again returning the changes to state
    2. shouldComponentUpdate
      • Check whether the component is updated
    3. render
      • Generate a new virtual DOM
    4. getSnapshotBeforeUpdate(prevProps,prevState)
      • 16.3 the reactnew
      • Execute after render generates the virtual DOM and before rendering the real DOM to take a pre-render snapshot of the DOM
      • The parameters this.state and this.props are new, so if you need to get any updates, you can use the parameters to receive them
      • You have to have a return value, which is passed to componentDidUpdate
    5. componentDidUpdate(prevProps,prevState,snapshot)

      • In 16.3, the third parameter snapshot is added to receive information from getSnapshotBeforeUpdate

      • Processing side effects (requests) : get real DOM nodes, data requests

  2. Component updates itself

    The component updates itself by calling setState inside the component, causing the current component to update. The component itself has been updated through three versions: before 16.3, 16.3, 16.4, and later

    1. in16.3 the ReactBefore that, the following functions are called in sequence:
      • shouldComponentUpdate
      • componentWillUpdate
      • render
      • componentDidUpdate
      • As you can see, the component update does not listen for props changes, only for state changes
    2. in16.3 the React, as the life cycle function changes, the function called by the component self-updating also changes, as follows:
      • shouldComponentUpdate
      • render
      • getSnapshotBeforeUpdate
      • componentDidUpdate
    3. inReact 16.4 and later, the official adjustment of component updates and parent component updates to the same order:

      • static getDerivedStateFromProps

      • shouldComponentUpdate

      • render

      • getSnapshotBeforeUpdate

      • componentDidUpdate

  3. forceUpdate

    The forceUpdate method can be used when the component depends on data that is not state and the data changes and you want the view to change as well. The forceUpdate method forces the view to update and shouldComponentUpdate is not called.

    import { Component } from 'react'

let name = "name"
class App extends Component {
  render() {
    return <div>
      <p>{name}</p>
      <button onClick={()= >{name = "new name "; this.forceUpdate(); }}></button>
    </div>}}export default App;
Copy the code

3. Unloading stage

Component uninstallation removes a component from the DOM. There is only one life cycle function: componentWillUnmount, which listens for components to be unmounted, usually to remove some of the components added to the global component when it is unmounted.

Life cycle graph address: projects. Wojtekmaj. Pl/react – lifec…

16.3 before

16.3

16.4 and later

React Engineer’s Guide