Learning React requires learning about component lifecycle. we should learn about the latest lifecycle. we should apply what we learn to optimize performance.

The Component Lifecycle

The React Version: 16.3

1 Visualization of life cycle

Knowing the latest React lifecycle and its features (such as asynchronous rendering) will help you develop high-performance React applications.

High clearly the figure

2 brief Summary:

  • Three methods have been removed
  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate
  • Two methods have been added
  1. static getDerivedStateFromProps(nextProps, prevState)
  2. getSnapshotBeforeUpdate(prevProps, prevState)
  • Changed 1 method and added a third parameter
  1. componentDidUpdate(prevProps, prevState, snapshot)
  • Reason for change:The website says it’s for asynchronous rendering in future versionsIn order to support async rendering

The last

I hope interested partners can watch the official website, in-depth understanding and learning.

Website document: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops