Introduction to the

Whether React or Vue, the lifecycle of a component is important. We can inject code into the lifecycle of a component by providing a series of hook functions (similar to events), and then do something when we expect it.

Simple definition: The life cycle is the sequence of processes that a component goes through from birth to destruction.

In React, before hooks came along, the life cycle only existed in class components. Function components re-run functions every time they are called, and the old components are destroyed immediately

The React 16.x release is a turning point for lifecycle changes, and I’ve seen most articles about v16.3 introducing two new lifecycle hook functions, getDerivedStateFromProps and getSnapshotBeforeUpdate, And in the future version removed three lifecycle function componentWillMount componentWillReceiveProps, componentWillUpdate, so think of yourself to summarize the life cycle of a contrast between the old and the new.

The old version life cycle

As shown in the figure below

Component Creation phase

  1. Constructor (component initialization)

    • The same component object is executed only once
    • SetState cannot be called to change the state value before the page is first mounted

  2. ComponentWillMount (Component is about to be mounted)

    • Normally, as with Constructor, this should only be run once(It is possible to interrupt its life cycle before mounting, causing the life cycle function to run multiple times; Or because SSR scenarios run this lifecycle function on both the server and client)
    • You can use setState, but you generally do not change the state value at this stage to avoid bugs

  3. Render (virtual DOM)

    • Returns the virtual DOM, which is mounted into the virtual DOM tree and eventually rendered onto the page
    • The Render method is called whenever it needs to be rerendered
    • banCalling setState results in an infinite recursive rendering

  4. ComponentDidMount (after the component has been mounted to the page)

    • It will only be executed once
    • It is used to remotely obtain data and start timers

Component update phase

  1. ComponentWillResiveProps (nextProps) (attribute change trigger) is basically useless

    • this.propsThe new property value is passed as the previous property

  2. ShouldComponentUpdate (nextProps, nextState) (Returns a Boolean value to determine whether the component should be rerendered)

    • Generally by contrastthis.props 与 nextProps.this.state 与 nextStateTo determine if this component needs to be rerendered
    • This function returns by defaulttrue
    • React is encapsulated internallyPureComponentIt is in this life cycle that the comparison encapsulation is made

  3. render

  4. ComponentWillUpdate (nextProps, nextState) (Component is about to be rerendered)

  5. ComponentDidUpdate (prevProps, prevState) (Component has been re-rendered)

    • You can typically use the state before backtracking or manipulate the DOM

Component destruction phase

ComponentWillUnmount (triggered when the component is removed from the virtual DOM tree)

  • This function usually destroys dependent resources, such as timers, manually added event listeners, and so on

New edition life cycle

As shown in the figure below

Component initialization to initial mount phase

  1. Constructor (component initialization)

    • The same component object is executed only once
    • SetState cannot be called to change the state value before the page is first mounted

  2. Static getDerivedStateFromProps(props, state) → Remove old componentWillMount

    • A static methodCannot use this(This refers to the constructor itself.),Can'tGets the current state, or callssetStateUpdate the status
    • The two parameters areThe new property 与 A new state
    • The function returnsnullIf yes, the current status is not changed
    • The function returns an object that looks like the callsetStateBlend into the component state as well

  3. Render (virtual DOM)

    • Returns the virtual DOM, which is mounted into the virtual DOM tree and eventually rendered onto the page
    • The Render method is called whenever it needs to be rerendered
    • banCalling setState results in an infinite recursive rendering

  4. ComponentDidMount (after the component has been mounted to the page)

    • It will only be executed once
    • It is used to remotely obtain data and start timers

Component update phase

  1. Static getDerivedStateFromProps(props, state) (Property/state changes are triggered

  2. ShouldComponentUpdate (nextProps, nextState) (Returns a Boolean value to determine whether the component should be rerendered)

    • Generally by contrastthis.props 与 nextProps.this.state 与 nextStateTo determine if this component needs to be rerendered
    • This function returns by defaulttrue
    • React is encapsulated internallyPureComponentIt is in this life cycle that the comparison encapsulation is made

  3. 3. render

  4. GetSnapshotBeforeUpdate (prevProps, prevState) (Component is about to be rerendered)

    • The real DOM is built, but not actually rendered into the page
    • The two parameters arePrevious properties 与 Previous state
    • In this function, it is usually used to implement DOM operations that require manual control
    • Need to becomponentDidUpdateUsed in combination with hook functions,Otherwise a warning will be reported
    • The return value is used ascomponentDidUpdate, and the display is required to return a value,Otherwise a warning will be reported

  5. ComponentDidUpdate (prevProps, prevState) (Component has been re-rendered)

    • You can typically use the state before backtracking or manipulate the DOM

Component destruction phase

ComponentWillUnmount (triggered when the component is removed from the virtual DOM tree)

  • This function usually destroys dependent resources, such as timers, manually added event listeners, and so on

summary

That concludes my summary of the old and new lifecycle hook functions and their associated simple instructions