table of Contents
2.3static getDerivedStateFromProps()
3.1static getDerivedStateFromProps()
5.1static getDerivedStateFromError()
Life cycle
The so-called life cycle refers to the various stages of a thing from start to finish, of course, in React.js middle finger is a component of the process from creation to destruction, React.js function at different stages in the process of call, these functions we can be more precise control of the components, we have been using in front of the render function is actually a component life cycle stages of implementation of the rendering function
1. periodic classification
React.js divided the life cycle of components 四个different stages
-
Mount stage
-
Update phase
-
Unloading phase
-
Error Handling
It will correspond to different stages of a number of different functions
Reference: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
2. Mount the stage
Mount stage is to create a component to render the page process that provides 四个different functions
-
constructor()
-
render()
-
static getDerivedStateFromProps()
-
componentDidMount()
2.1constructor
constructor(props)
Constructor of the class, but also the component initialization function, under normal circumstances, we will do some initialization work at this stage
-
Initialization state
-
Handle event binding function of this
2.2render()
render method is Class method components must be implemented
2.3static getDerivedStateFromProps()
static getDerivedStateFromProps(props, state)
This method will render before the method is called, either mount the stage or the update phase, it exists only one purpose: to make components props updated when changes in state
Case: Mail to send - choose the recipient
2.4componentDidMount()
componentDidMount()
After assembly mounted ( the render content inserted DOM tree) call. Usually at this stage, we can:
-
Operating DOM node
-
send request
3. Update stage
Update phase refers to the process of re-rendering component, the component state update (call setState () ) and render the parent component will trigger
-
static getDerivedStateFromProps()
-
shouldComponentUpdate()
-
render()
-
getSnapshotBeforeUpdate()
-
componentDidUpdate()
3.1static getDerivedStateFromProps()
Mount same stage, the stage will trigger the update function of the life cycle
3.2shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)
Occurred in the update phase, getDerivedStateFromProps later, the render before, the function returns a Boolean value that determines whether to perform a follow-up the render , rendering is not the first time the function is called
import React from 'react';
import Child from './Child';
export default class ShouldComponentUpdateComponent extends React.Component {
constructor(...args) {
super(...args);
this.state = {
n: 1,
}
}
render() {
return(
<div>
<h2 onClick={e=> {
this.setState({n: this.state.n + 1})
}}>n: {this.state.n}</h2>
<Child value={this.state.n} />
</div>
)
}
}import React from 'react';
export default class Child extends React.Component {
constructor(...props) {
super(...props);
this.state = {
value: this.props.value
};
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.value !== nextState.value;
}
render() {
console.log('render');
return(
<div>
value: {this.state.value}
<button onClick={e=>{
this.setState({
value: this.state.value + 1
})
}}>+</button>
</div>
);
}
}This approach only as a way to optimize performance exists, do not attempt to rely on this method to "block" rendering, as it may cause problems. Secondly, in React.js the original has been done to render the necessary optimization, so can not bring particularly large on the function improved significantly by nature and easily increase the complexity of the components, it becomes difficult to maintain, unless it is determined to use it can bring significant performance improvements to the current component
The official also late to change the method of characteristics, even if the return false may still re-rendering components
This function is not recommended abuse
3.3render()
Ditto
3.4getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)
This method render () after it is output to the DOM before performing, for taking a snapshot before rendering. When we want to get the last update before the current DOM state, it can be treated here, the return value of the function will be passed to the next life cycle functions as arguments componentDidUpdate
This function is not commonly used.
3.5componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
This function in the DOM called immediately after the update, the first time rendering does not call this method. After that we can render in this function DOM operation
4. unloading phase
When the assembly is removed from the DOM will call a method
-
componentWillUnmount()
4.1componentWillUnmount()
componentWillUnmount()
This method will be called before the assembly to uninstall and destruction, where we can do some clean-up work, such as: a timer within the assembly, outstanding requests, etc.
5. Error Processing
When the constructor rendering process, life cycle, or subassembly throw an error, it calls the following method
-
static getDerivedStateFromError()
-
componentDidCatch()
5.1static getDerivedStateFromError()
static getDerivedStateFromError(error)
The method used to obtain the error thrown subassembly, the return value is an object that is in the storage state , in a subsequent render process can be processed according to the value of the object, such as: show different UI
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <div>出错了</div>;
}
return this.props.children;
}
}5.2componentDidCatch()
componentDidCatch(error, info)
This method getDerivedStateFromError () is similar, but there are different places:
-
This method will have a detailed error stack information recorded in the info parameters
-
The method can perform some additional actions: a printing error, error reporting information ......
