The reason for writing this article is to better upgrade the React version in the project, to the current version 16.3 of the new life cycle guess pit, and also to clarify the existing React life cycle.

New life cycle

static getDerivedStateFromProps

This new function is to ensure that the state and the props are synchronous, when called for and the significance of its existence is to replace ComponentWillReciveProps.

This method then caused me extreme discomfort, mainly because it is a static method. Shielding everything through this), which returns an object that is incorporated into the component’s soonto-update state, just like setState.

The main condition for this lifecycle function is

  • When a component has been rendered to the page and needs to update state
  • The state needs to be updated from props

getSnapshotBeforeUpdate(prevProps, prevState)

This new method is called before the virtual DOM maps to the real DOM.

This function is used when you need to get the current DOM state. For example, when you need to add new data to the top of a page by dropping the scroll bar, you can keep the DOM up to date by calculating the current scroll bar position by calling the current method.

Although this function is not static, it is recommended to return a value rather than update the component, which will be the third argument to componentDidUpdate;

The two asynchronous method componentWillReceiveProps and componentWillUpdate will be deprecated in version 17.0, (UNSAFE_componentWillReceiveProps and UNSAFE_componentWillUpdate will remain compatible). The implication is, if you want to upgrade, just use the new cycle. Otherwise, you need to add an UNSAFE to disgusting yourself. In the long run, however, synchronous operations can help avoid the difficulty of maintaining asynchronous states.

Handwritten a periodic table of declarations