New life cycle process

Take a look at the latest react lifecycle diagram:

getDerivedStateFromProps

The React lifecycle has always been named very semantically, meaning to get state from props, which is pretty straightforward.

The function of this lifecycle is essentially to map the props passed to state, so to speak.

Due to the 16.4 change, this function is called before every re-rendering. What does this mean?

This means that even if your props didn’t change at all, but the parent state changed, causing the child component to re-render, the lifecycle function will still be called. What seems like a very small change can lead to a lot of hidden problems.

use

The life cycle function is to replace componentWillReceiveProps exist, so when you need to use componentWillReceiveProps, can consider to use getDerivedStateFromProps for replacement.

The arguments are different, but getDerivedStateFromProps is a static function, meaning that this cannot access the class properties, and it is not recommended to access the properties directly. Instead, you should look at the nextProps and prevState provided by the parameters, and map to state from the new props passed in.

Note that if the props is passing something that doesn’t need to affect your state, then you need to return null. This return value is required, so try to write it to the end of the function.

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps; // When passed intypeUpdate state when changes occurif (type! == prevState.type) {return {
            type}; } // Otherwise, nothing is done with statereturn null;
}
Copy the code

getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

The function of getDerivedStateFromProps is to update the props to the internal state of the component. So there are two possible scenarios:

Update internal state unconditionally based on prop, i.e. update state whenever a prop value is passed in

The state value is updated only when the prop value and state value are different.

Let’s look at a couple of examples.

Suppose we have a table component that updates the view based on incoming list data.

class Table extends React.Component {
    state = {
        list: []
    }
    static getDerivedStateFromProps (props, state) {
        return {
            list: props.list
        }
    }
    render() {... // Display list}}Copy the code

The above example is the first use scenario, but updating state unconditionally from a prop is not necessary at all. We can just operate on the prop value directly without using the state value class.

Looking at an example, this example is a color picker. This component can select the corresponding color and display it, and it can display the color according to the value of the passed prop.

Class ColorPicker extends React.Component {
    state = {
        color: '# 000000'
    }
    static getDerivedStateFromProps (props, state) {
        if(props.color ! == state.color) {return {
                color: props.color
            }
        }
        returnnull } ... // Select the color methodrender() {... // Display color and select color operation}}Copy the code

Now we can use this color picker to select the color, and we can pass in a color value and display it. However, there is a bug in this component. If we pass in a color value and then use the component’s internal color selection method, we will find that the color does not change.

This is a common bug in using this lifecycle. Why does this bug happen? React 16.4^ setState and forceUpdate also trigger this lifecycle, so the getDerivedStateFromProps method is used when the internal state changes. And update the state value to the prop passed in.

Now let’s fix this bug.

Class ColorPicker extends React.Component {
    state = {
        color: '# 000000',
        prevPropColor: ' '
    }
    static getDerivedStateFromProps (props, state) {
        if(props.color ! == state.prevPropColor) {return {
                color: props.color
                prevPropColor: props.color
            }
        }
        returnnull } ... // Select the color methodrender() {... // Display color and select color operation}}Copy the code

By saving a previous prop value, we can change state only if the prop changes. This solves the above problem.

The getDerivedStateFromProps method is used as an example.

  • When using this life cycle, be careful to compare the value of the prop passed in with the prop passed in previously.

  • Because this lifecycle is static, keep it a pure function with no side effects.