Component life cycle

mount

The component instance is created and inserted into the DOM (note: not after, not before, but when). , the life cycle is as follows:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

update

An update is triggered when a component’s props or state changes. The lifecycle is called as follows when updating:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

uninstall

When a component is removed from the DOM, the lifecycle is as follows:

  • componentWillUnmount()

Error handling

When an error is thrown in the rendering process, lifecycle, or from a component constructor, the following methods are called:

  • static getDerivedStateFromError()
  • componentDidCatch()

React life cycle diagram

Vue life cycle diagram

contrast

A comparison of the life cycle diagram shows that:

  • React is designed to split its life cycle into three functional parts, each with its own calling function.
  • Vue is designed to arrange the lifecycle calls in time, more like a process from beginning to end in time.

Therefore, when learning the two frameworks, we should pay attention to the distinction, not according to one way of learning, but two different ways of learning.

conclusion

  • State cannot be modified using setState in constructor
  • ComponentDidMount: Initiate a web request for data, add a subscription.

Here’s a brief summary of these two, and more relevant considerations will be added later.