preface
I’ve been a little busy lately.
React lifecycle concepts
As with Vue, the React component is created, updated, and destroyed with various functions. These functions that are fired at a specific time of the component are collectively referred to as the lifecycle functions of the component.
React Lifecycle
The component lifecycle can be divided into three phases, which we describe in turn:
2.1 Components Installation (Mounting
When a component instance is created and inserted into the DOM, these methods are called in the following order:
- constructor()
- Static getDerivedStateFromProps() (added after React16)
- render()
- componentDidMount()
Constructor ()
There are two main things to do
- Assign an object to state to initialize the local state.
- Bind event handler methods to instances.
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
Copy the code
The static getDerivedStateFromProps () function
This is a new lifecycle function for React, which is used to derive new states from props.
static getDerivedStateFromProps(props, state) {
console.log(props)
return props
}
Copy the code
It takes two parameters: the props of the component and the current state, and returns an object to update the state. Note that this object is merged with the original state, or it can return null to say that nothing is being updated.
Render () function
The Render () function is a pure function that returns the React element.
Render () will not be called if shouldComponentUpdate() returns false.
ComponentDidMount () function
ComponentDidMount () is called immediately after mounting the component (inserted into the tree). Initialization of the DOM node that is required should take place here. It’s also used to do two things:
1. A good place for network data interface requests.
2. Add some event subscriptions (don’t forget to unsubscribe in componentWillUnmount())
2.2 Updating of components phase
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
ShouldComponentUpdate (nextProps, nextState) functions
If shouldComponentUpdate() returns false, then componentWillUpdate(), Render (), and componentDidUpdate() will not be called. Here is the code to determine whether the component is re-rendered by the next parameter change (execute the render function)
// Check whether component props are updated
shouldComponentUpdate(nextProps, nextStates){
returnnextProps.content ! = =this.props.content
}
Copy the code
GetSnapshotBeforeUpdate (prevProps, prevState) functions
GetSnapshotBeforeUpdate () immediately before submitting the latest rendered output to the DOM (that is, my state has been updated, but I have not yet render, I can get some information about the DOM before the update here). It allows your component to capture some information (for example, scroll position) from the DOM before it can change. Any values returned by this lifecycle method are passed as arguments to componentDidUpdate().
ComponentDidUpdate (prevProps, prevState, snapshot) function
ComponentDidUpdate () is called immediately after an update, not initially rendered. The snapshot parameter is the parameter returned by the getSnapshotBeforeUpdate(prevProps, prevState) function.
ComponentDidUpdate () will not be called if shouldComponentUpdate() returns false.
2.3 Components Unmounting (Mounting
ComponentWillUnmount () is the only function executed during component unload.
componentWillUnmount()
ComponentWillUnmount () is called immediately before the component is unmounted and destroyed. Use this method to perform any necessary cleanup, such as invalidating timers, canceling network requests, or clearing all subscriptions created in componentDidMount().
Third, summary
React lifecycle functions are not recommended or will be abolished. In general, just remember the important ones, and know what each of these life cycle functions are for and what problems they solve.