译 文 : 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 the
state
Change 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 the
componentDidMount
Or event listeners added elsewhere - Disconnection Request
- Empty timer
- Clean up the
componentDidMount
The DOM element created in