React V17 uses the React lifecycle.

In the React v17 version delete componentWillMount (), componentWillReceiveProps (), componentWillUpdate () the three functions, Keep using UNSAFE_componentWillMount (), UNSAFE_componentWillReceiveProps (), UNSAFE_componentWillUpdate ()

This diagram is from the 👉 React Lifecycle link, where you can view the lifecycle functions for different react versions.

1. Lifecycle overview

React’s life cycle is roughly divided

  • The component is first rendered into the Dom tree
  • Component update rerenders caused by component state, props changes
  • Component Unmount deletes a component from the Dom tree

2. Component loading (Mount)

  • Constructor: Initialize state here, bind the member function this environment, and localise the props
  • GetDerivedStateFromProps: Executes before render at create time or update time, allowingpropsCan be updated inside the componentstateIn the.
  • Render:Rendering functionThe only function that must not be omitted must have a return value. Returning null or false means that no DOM elements are rendered. It is a pure function for rendering only, and the return value depends entirely on this.state and this.props. There is no way to modify props, state, pull data, etc. The Render function returns the JSX object, not the DOM tree, because the React library determines when to actually render.
  • ComponentDidMount:Mount success function. This function is no longer called immediately after the Render call, because the Render function simply returns the JSX object and is not immediately mounted to the DOM tree, whereas componentDidMount is called after the component has been rendered into the DOM tree. Also, the componentDidMount function is not called for server-side rendering.

3. Component Update

When a component is mounted to the DOM tree, the props/state is modified to cause the component to update. The update process calls the following lifecycle functions:

  • ShouldComponentUpdate (nextProps nextState) :Whether to re-render the componentBool True indicates to update, false indicates not to update. Properly used, React component performance is greatly improved and unnecessary rendering is avoided.
  • GetSnapshotBeforeUpdate: executed after Render and before React updates the DOM. It allows your component to capture information (such as scroll position) from the DOM before it can change, for example to calculate scroll height in a chat bubble page. Any value that it returns will be passed as an argument to componentDidUpdate()
  • Render:Rendering function.
  • ComponentDidUpdate:Update completion function.

4. Component Unmount

  • ComponentWillUnmount: This function is called once before the React component is removed from the DOM tree. This function is often used to remove the side effects of componentDidMount, for exampleClear timer,Clear event listening.

React V16.3 Added lifecycle methods

React V16.3 is a minor upgrade, but there are significant changes to the React component lifecycle functions.

The new life cycle is as follows:

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

The following life cycles are also discarded:

  • componentWillReceiveProps
  • componentWillMount
  • componentWillUpdate

17 version removed componentWillMount (), componentWillReceiveProps (), componentWillUpdate () the three functions, Keep using UNSAFE_componentWillMount (), UNSAFE_componentWillReceiveProps (), UNSAFE_componentWillUpdate ()

5.1 getDerivedStateFromProps (nextProps, prevState)

Function:

To update the props to the internal state of the component, it should return an object to update the state. If null is returned, nothing is updated.

Execution timing: both create and update before render

Features:

  1. Is a static method, and the inner this refers to the class rather than the instance. So you can’t access class properties through this. To preserve its pure function properties, use parametersnextProsandprevStateTo make a judgment based on the new incomingpropsTo mapstate.
  2. Be sure to return one even if there are no content updatesnullValue, or an error will be reported.
static getDerivedStateFromProps(nextProps,prevState){
    // state Return null when there is no update
    return null;
}
Copy the code

5.2 getSnapshotBeforeUpdate (prevProps, prevState)

What it does: It allows your component to capture information (such as scroll position) from the DOM before possible changes, which can be used in chat bubble pages to calculate scroll height. Any value that it returns will be passed as an argument to componentDidUpdate()

Execution timing: after render, when the DOM can be read but not used.

getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture the scrolling position for later scrolling to note the returned value
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
}
Copy the code

Example: An example of using this life cycle in a real project would be a message bubble scene that pops up on the bubble page during a chat, where the component is re-rendered and the DOM will slide down if the scrolling height of the enclosing DOM is not re-calculated.

Online demo: 👉getSnapshotBeforeUpdate example

Using getSnapshotBeforeUpdate can optimize this scenario. The perScrollHeight of the outer DOM element is recorded in getSnapshotBeforeUpdate life cycle, and the scrollTop of the outer DOM is recalculated in componentDidUpdate. At this point, the page scroll a distance will not appear the phenomenon of the message beat 👉 optimized example

this.listRef.current.scrollTop = curScrollTop + (this.listRef.current.scrollHeight – perScrollHeight)

Code: 👉 Github code

6. The life cycle of setState cannot be used

You can’t use setState for x, you can use setState for √.

7. Summary