As of Act 16.3.0, the life cycle has undergone some changes. This article focuses on the life cycle after Replay 16.3.0.

More articles can be read: github.com/YvetteLau/B…

Life cycle prior to React16.3.0:

The life cycle of the React component prior to version 16 is familiar. React 16 made some changes to the component lifecycle function, as described below.

Life cycle prior to React16.3.0

Create a time:

  1. constructor(props, context)
  2. componentWillMount()
  3. render()
  4. componentDidMount()

Runtime:

When the props changes

  1. componentWillReceiveProps(nextProps, nextContext)
  2. shouldComponentUpdate(nextProps, nextState, nextContext)
  3. componentWillUpdate(nextProps, nextState, nextContext)
  4. render
  5. componentDidUpdate(prevProps, prevState, snapshot)

When state changes

  1. shouldComponentUpdate(nextProps, nextState, nextContext)
  2. componentWillUpdate(nextProps, nextState, nextContext)
  3. render
  4. componentDidUpdate(prevProps, prevState, snapshot)

When unloading

componentWillUnmount()

Life cycle after React16.3.0

Create a time:

  1. constructor(props, context)
  2. static getDerivedStateFromProps(props, status)
  3. render()
  4. componentDidMount()

Or the following life cycle:

  1. constructor(props, context)
  2. componentWillMount() / UNSAFE_componentWillMount()
  3. render()
  4. componentDidMount()

Note: GetDerivedStateFromProps/getSnapshotBeforeUpdate and componentWillMount/componentWillReceiveProps/componentWillUpdate If exist at the same time, the React will give that warning messages in the console, and perform only getDerivedStateFromProps/getSnapshotBeforeUpdate “[email protected]”

Runtime:

When the props changes

  1. static getDerivedStateFromProps(props, status)
  2. shouldComponentUpdate(nextProps, nextState, nextContext)
  3. render
  4. getSnapshotBeforeUpdate(prevProps, prevState)
  5. componentDidUpdate(prevProps, prevState, snapshot)

Or the following life cycle:

  1. componentWillReceiveProps(nextProps, nextContext)/UNSAFE_componentWillReceiveProps
  2. shouldComponentUpdate(nextProps, nextState, nextContext)
  3. componentWillUpdate(nextProps, nextState, nextContext)
  4. render
  5. componentDidUpdate(prevProps, prevState, snapshot)

When state changes

  1. static getDerivedStateFromProps(props, status)
  2. shouldComponentUpdate(nextProps, nextState, nextContext)
  3. render
  4. getSnapshotBeforeUpdate(prevProps, prevState)
  5. componentDidUpdate(prevProps, prevState, snapshot)

Or the following life cycle:

  1. shouldComponentUpdate(nextProps, nextState, nextContext)
  2. componentWillUpdate(nextProps, nextState, nextContext)/UNSAFE_componentWillUpdate
  3. render
  4. componentDidUpdate(prevProps, prevState, snapshot)

The destruction of

componentWillUnmount()

New life cycle diagram:

Life cycle details

1.constructor(props, context)

The constructor life cycle, if not required, can be default. State and bound event handlers are typically initialized in the constructor method. However, if constructor is written, then super(props) must be called; Otherwise, an error may be generated.

Such as:

class Base extends Component { constructor(props) { super(); // Should be super(props); } state = { name: this.props.name } //.... code }Copy the code

Uncaught TypeError: Cannot read property ‘name’ of undefined.

Also, if you define a context and need to use this.context in state to get the content of the context, you need super(props, context);

However, if you default to constructor, you can safely use this.props or this.context in state without raising an error.

class Base extends Component { state = { name: this.props.name, color: this.context.color } //.... code }Copy the code

Initialization state can also be defined in constructor. If you need to bind this to a method, do so in Constructor.

2.static getDerivedStateFromProps(props, state)

This method is called when the component’s state needs to be changed according to props. This method is executed before render(), which is triggered every time render is triggered.

This method takes two parameters, props and state; The return value is the state object. You do not need to return the entire state. You can return the state that needs to be changed. If not, you can return NULL.

class Base extends Component {
    state = {
        age: 20
    }
    static getDerivedStateFromProps(props, state) {
        return {
            age: 50
        }
    }
    render() {
        / / 50
        return (
            <div>{this.state.age}</div>)}}Copy the code

This method allows a component to update its internal state based on changes to props, and component state obtained in this way is called derived state. Derived states should be used with caution as they may introduce potential errors

3.render

Methods that must be provided in the React component. This is executed when there is an update to either the state or props data.

Render () is a pure function, so don’t do setState or anything like that. Render must have a return value. The data type returned can be:

  • Null, String, Number, Array, Boolean.
  • React elements
  • Fragment
  • Portal

Be careful not to call setState in render

4.componentDidMount

The componentDidMount() method is executed immediately after the component is loaded, when the component’s associated DOM node is inserted into the DOM tree. This method is executed only once in the life of the component. Normally, we would setState() here, or make an interface request, set a subscription, etc.

class Base extends Component {
    state = {
        age: 20
    }
    componentDidMount() {
        this.fetchDate();
    }
    render() {
        return (
            <div>{this.state.age}</div>)}//other code
}
Copy the code

5.shouldComponentUpdate(nextProps, nextState, nextContext)

ShouldComponentUpdate is called before rendering the new props or state, and returns true by default. This method is not called when forceUpdate().

If shouldComponentUpdate () returns false, so getSnapshotBeforeUpdate, render and componentDidUpdate will not be invoked.

This life cycle is primarily used to optimize performance.

6.getSnapshotBeforeUpdate(prevProps, prevState)

Called before the output of render() is rendered into the DOM. Enables components to capture current values (such as scroll positions) before they are changed. Any value returned by this life cycle is passed to componentDidUpdate() as the third argument.

7.componentDidUpdate(prevProps, prevState, snapshot)

Call componentDidUpdate() after the update occurs. Use this as an opportunity to manipulate the DOM when the component is updated. Compare the current props to the previous props (for example, if the props have not changed, then the network request may not be required.

If the component uses getSnapshotBeforeUpdate(), the value it returns is passed to componentDidUpdate() as the third “snapshot” argument. Otherwise, the parameter is undefined.

8.componentWillUnmount()

Called immediately before the component is unloaded and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any listeners created in componentDidMount ().

Finally, a note:

ComponentWillUpdate componentWillReceiveProps, componentWillUpdate these three life cycle in the React in future versions will be abandoned.

While UNSAFE_componentWillUpdate UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate still can continue to use in a future version.

Initialization phase (parent and child):

Runtime: Parent component props/state updated

If the child component’s shouldComponentUpdate returns false, the subsequent life cycle of the child component is not executed, but the life cycle of the parent component continues.

Uninstall phase: Uninstalls the parent component

Welcome to xiaojie’s wechat official account: Front-end Universe.

Reference:

  1. Segmentfault.com/a/119000001…
  2. www.jianshu.com/p/514fe21b9…
  3. Blog.csdn.net/qq_29311407…

Read more blog posts, please move (welcome Star ah) : github.com/YvetteLau/B…

Recommend attention to my public number