Introduction:

The React component life cycle is broadly defined and can be divided into mount, render, and uninstall phases. When a rendered component needs to be updated, we re-render the component until it is unloaded. Thus, we can divide the React lifecycle into two categories:

  • When a component is being mounted or unmounted
  • When a component receives new data, it updates

Mount or unmount process

1. Mount components

Component mounting is the most basic process. It is the initialization of component state that the procedure does. Such as

import React, { Component } from 'react'; export default class App extends Component { static propTypes = { } static defaultProps = { }; constructor(props) { super(props); this.state = { }; ComponentWillMount () {console.log('WillMount'); } componentDidMount() { console.log('DidMount'); } render() { return ( <div>This is a demo.</div> ) } }Copy the code

We see that propTypes and defaultProps represent the props type check and the default type, respectively. These two properties are declared static, meaning they can be accessed from outside the class, such as app. propTypes and app.defaultprops

Two life cycles

  • ComponentWillMount: Render method before execution
  • ComponentDidMount: Executes after the Render method

NOTE

  1. What happens if we execute the setState method in componentWillMount? The component updates state, but the component only renders once. Therefore, it does not make sense, the initialization state is placed in this.state

  2. What happens if we execute the setState method in componentDidMount? The component is of course updated again, but rendering the component twice during initialization is not a good idea. But sometimes, such as calculating a component’s position or width and height, you have to render the component first, update the necessary information, and then render it again.

Component uninstallation

There is only one uninstall:

  • ComponentWillUnmount: Life cycle before unloading

Normally, in the componentWillUnmount method, we perform some cleanup method, such as event collection, or cleanup timer, etc.

Data update process

The update process is generally divided into two situations:

  • The parent component passed down the props update
  • The component itself performs setState to update
import React, { Component } from 'react'; export default class App extends Component { constructor(props) { super(props); this.state = { count: 0, } this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ count: this.state.count + 1, }); } shouldComponentUpdate(nextProps, nextState) { console.log(nextProps, nextState); return true } componentWillUpdate(nextProps, nextState) { console.log(nextProps, nextState); } componentDidUpdate(prevProps, prevState) { console.log(prevProps, prevState); Render () {return (<div className="header"> <button onClick={this.handleclick}> </button> <div>{this.state.count}</div> </div> ) } }Copy the code

If the component’s own state is updated, shouldComponentUpdate, componentWillUpdate, Render, and componentDidUpdate are executed in order

  • shouldComponentUpdate

Is a special method that accepts props and states that need to be updated, allowing developers to build up the necessary criteria to update when they need to and not update when they don’t. Therefore, when the method returns false, the component no longer executes the lifecycle method down

ShouldComponentUpdate is essentially used for proper component rendering. For example, when the parent node props changes, ideally only the node on a link about the props changes should be rendered. However, by default React renders all nodes because shouldComponentUpdate returns true by default. Proper component rendering is another way of optimizing performance

It is worth noting that stateless components have no lifecycle methods, which also means that it has no shouldComponentUpdate. When rendered to this class component, it is rerendered each time. To better use stateless components, we can choose to reference the Pure method of the Recompose library

  • componentWillUpdate

Update process before rendering

  • componentDidUpdate

Update process after rendering

If the component is updated by the parent component update props, then executes before shouldComponentUpdate componentWillReceiveProps method.

React added life cycle

getSnapshotBeforeUpdate(prevProps, prevState)

The usual use case for componentWillUpdate instead is to read the state of a DOM element and process it in componentDidUpdate before the component is updated.

The difference between the two is:

  1. With React enabled asynchronous rendering mode, it is not safe to use the DOM element states read in componentWillUpdate for componentDidUpdate, since the values may already be invalid.

  2. GetSnapshotBeforeUpdate is called before final render, which means that the DOM element states read in getSnapshotBeforeUpdate are guaranteed to be the same as in componentDidUpdate.

Any values returned by this life cycle are passed as arguments to componentDidUpdate ().

getDerivedStateFromProps(nextProps, prevState)

Instead of componentWillReceiveProps ().