译 文 : How to use React Lifecycle Methods

React lifecycle

There are basically three categories

  • Mount
  • Update
  • Unmount

Mount

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Update

  • componentWillReceiveProps() / static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • componentWillUpdate() / getSnapshotBeforeUpdate()
  • render()
  • componentDidUpdate()

Unmount

  • componentWillUnmount()

Lifecycle approach

ComponentWillMount (soon to be removed)

componentWillMount()
Copy the code

When React renders a component for you, enter the method first.

Note: componentWillMount() is the only lifecycle method called before Render (). Therefore, it is the only method called in the server-side rendering.

Since componentWillMount() will be removed, the official recommendation is to use constructor() instead

**Update: ** This method should be avoided in new code

State

You can use this.setstate () in this method but it doesn’t have to trigger rerendering.

componentDidMount

componentDidMount()
Copy the code

When the method is called, React has rendered the component and inserted it into the DOM. So any DOM-dependent initialization should be placed here.

State

The this.setstate () method can be used in this method, which triggers rerendering.

Use Cases

  • fetch data
  • Rely on DOM initialization
  • Adding Event Listeners

ComponentWillReceiveProps (to remove)

componentWillReceiveProps(nextProps)
Copy the code

This method is called first when the component receives new props, but it is important to note that this method is called even if the props are not changed, so be sure to compare this. Props to nextProps to avoid unnecessary rendering.

Update: componentWillReceiveProps will be removed, use the new static getDerivedStateFromProps instead.

Static getDerivedStateFromProps (New)

static getDerivedStateFromProps(props, state)
Copy the code

This method is called every time Render is called — even if the props haven’t changed. So use it with caution.

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)
Copy the code

You can use this method when you need to avoid unnecessary rendering. Returning false means React does not execute componentWillUpdate(), Render (), componentDidUpdate().

This method is not executed at initialization time.

* * Note: React may treat shouldComponentUpdate as a hint rather than strictly based on its return, so shouldComponentUpdate may return false but still render.

State

SetState cannot be set in this method.

Use Case

As mentioned earlier, this approach can be problematic. React provides another workaround, so if a component is found to be slow, react.pureComponent can be used instead of react.ponent, which provides a shallow contrast between props and state.

ComponentWillUpdate (to be removed soon)

componentWillUpdate(nextProps, nextState)
Copy the code

This method is called before rendering. ShouldComponentUpdate is called when new props enter the component or when state changes.

This method is not called during initial rendering.

Update: shouldComponentUpdate is about to be removed.

State

SetState cannot be called in this method.

Use Cases

The shouldComponentUpdate method is called exactly before render(), so it’s not appropriate to do anything DOM related in that method because it will soon expire.

Common use cases are:

  • According to thestateChange to set variables
  • Distributed event
  • Start the animation

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)
Copy the code

The method was added in React 16.3 and it works with componentDidUpdate. This method should override all use cases of the old shouldComponentUpdate method.

GetSnapshotBeforeUpdate is called before the element is rendered and written to the DOM, so you capture DOM information (e.g. scroll position) before the DOM is updated.

ShouldComponentUpdate should receive the snapshot parameter regardless of what is returned.

Use Cases

If you want to get a list or scroll position in a chat window, you can get this information in getSnapshotBeforeUpdate. The scrolling information is then returned as the snapshot value. This allows you to set the correct scrolling position in componentDidUpdate after updating the DOM.

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)
Copy the code

React After updating the component, call componentDidUpdate. This method is not called during initial rendering.

Use Cases

You can use this method if the component needs to manipulate the DOM after updating.

componentWillUnmount

componentWillUnmount()
Copy the code

Call this method before uninstalling and destroying components.

State

State cannot be set when uninstalling components

Use Cases

Use this method to clean up actions.

  • Delete thecomponentDidMountOr event listeners added elsewhere
  • Disconnection Request
  • Empty timer
  • Clean up thecomponentDidMountThe DOM element created in