This is the fourth day of my participation in the August More Text Challenge. For details, see “August More Text Challenge”.

preface

“The colours of August are of gold, bright and precious; The colours of August are brewed with sunshine, fragrant and brilliant.”

In the future, I wish you to adjust yourself to the best state, slowly work hard, slowly get better

Common lifecycle functions

Life cycle diagram:

constructor()

The React component’s constructor is called before it is mounted. If it is a child component, it would normally call super(props) at the beginning to avoid bugs in the this.props constructor.

There are two ways to use it:

  1. Initialize the internal state by assigning an object to this.state.
  2. Bind an instance for the event handler
✅ constructor(props) {super(props); // Do not call this.setstate () this.state = {counter: 0}; this.handleClick = this.handleClick.bind(this); } ❌ constructor(props) {super(props); This.state = {color: props. Color}; this.state = {color: props. }Copy the code

render()

Render () is a pure function. Finally, the DOM element is rendered according to state and props

Note:

Render () is not called if shouldComponentUpdate() returns false during the subsequent update phase

componentDidMount()

When the component is mounted, the DOM representing the component is mounted to the PAGE’s DOM tree, and it is safe to manipulate the DOM even after fetching data.

We typically make network requests and get data during this lifecycle. You can also add a subscription here, and if you do, don’t forget to unsubscribe at componentWillUnmount()

  • componentDidUpdate(prevProps, prevState, snapshot)

    This method will be called immediately after the update. This method is not executed for the first render

    It has a typical use:

    (props) {// Don't forget to compare props if (this.props. Id! == prevProps.id) { this.fetchData(this.props.id); }}Copy the code

    Note:

    1. If the component implements getSnapshotBeforeUpdate()Life cycle (not commonly used), its return value will be ascomponentDidUpdate()The “snapshot” parameter for the third parameter in the Otherwise, this parameter is undefined.
    2. ifshouldComponentUpdate()The return value isfalseIs not calledcomponentDidUpdate()

shouldComponentUpdate(nextProps, nextState)

Determines whether the React component’s output is affected by the current state or props change.

Returns a Boolean value. By default, it returns true, state or props. The component will rerender each time there is a change.

This method of determining whether a component needs to be updated is often an important way to improve performance.

We can compare this.props to nextProps and this.state to nextState, and return false to prevent the component from updating. Keep in mind, however, that returning false does not prevent the child component from rerendering if state changes.

componentWillUnmount()

It is called directly before the component is uninstalled and destroyed.

Perform the necessary cleanup in the method, such as clearing timer tasks, canceling network requests, or clearing subscriptions created in componentDidMount(), and so on

conclusion

The common life cycle is introduced here, if this article has helped you, welcome to 👍 and ⭐️

If there are any mistakes in this article, please correct them in the comments section 🙏🙏.