Do you really understand the React lifecycle

The onion model

static getDerivedStateFromProps

• static getDerivedStateFromProps(nextProps,prevState): Received from the parent componentpropsAnd the previous state of the component, and returns an object to updatestateOr returnsnullTo represent the receivedpropsNo changes, no updatesstate
• The lifecycle hook does:To pass in the parent componentprops mappingTo the child componentstateAbove, so that the inside of the component doesn’t have to pass throughthis.props.xxxGot the value of the property. All passthis.state.xxxTo obtain. The mapping is a copy of the parent componentprops, as the child component’s own state. Note: Child components passsetStateThe parent component does not change when updating its stateprops
• Cooperate withcomponentDidUpdate, can covercomponentWillReceivePropsAll usages of
• When the lifecycle hook fires:
  • In React 16.3.0: The component is instantiated and new is receivedpropsWill be called
  • In React 16.4.0: The component is instantiated and new is receivedpropsIs called when the component status updates
  • Online demo – Test in versions 16.3.0 and 16.4.0 when the lifecycle hook is fired
• Use: The online demo
  • Note: When deriving state, you do not need to set the state of the component itself

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <AAA />
    </div>
  );
}

class AAA extends React.Component {
  state = {
    age: Awesome!
  };

  add = (a)= > {
    this.setState({ age: this.state.age + 1 });
  };

  render() {
    return (
      <div>
        <ChildA onChangeParent={this.add} age={this.state.age} />
      </div>); } } class ChildA extends React.Component { state = { num: 888 }; // Derive the state object from the new property object // nextProps -- prevState -- static getDerivedStateFromProps(nextProps, state) { console.log('props',nextprops); // Return an object to update state or null to indicate that the props received do not need to update state if (nextprops. Age! == state.age) {console.log(" update "); Return {onChangeParent: nextprops onChangeParent, age: nextprops. Age, / / note: there is no need to put the state of the component itself also come in / / num: state. The num}; } return null; } add = () => { this.setState({ num: this.state.num + 1 }); }; render() { const { onChangeParent } = this.state; console.log('state',this.state); return (<>
        <div onClick={onChangeParent}>change</div>
        <div onClick={this.add}>add</div>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code

Version of the migration

• componentWillMount.componentWillReceiveProps.componentWillUpdateThese three life cycles are called because they are often misunderstood and abusedUnsafe (not secure, but code that uses these life cycles may have bugs in future React releases that could affect future asynchronous rendering)Life cycle of.
• The React version 16.3: Introduces aliases for unsafe lifecyclesUNSAFE_componentWillMount.UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate. (Both old lifecycle names and new aliases are available in this release)
• React 16.3 and later: in order tocomponentWillMount.componentWillReceiveProps 和 componentWillUpdateEnable deprecation warnings. (Both the old lifecycle name and the new alias are available in this release, but the old name logs the DEV mode warnings)
• React 17.0 version:Introduced new rendering methods —Asynchronous rendering(Async Rendering), proposing a life cycle that can be interrupted, and the phase that can be interrupted is realitydomVirtual before mountdomThe construction phase, the three life cycles to be removedcomponentWillMount.componentWillReceiveProps 和 componentWillUpdate. (Starting with this release, only the new “UNSAFE_” life cycle name will be in effect)

When an externalpropsHow do you request data again, change state, and so on when it changes

usegetDerivedStateFromProps + componentDidUpdateLoad the data

class ExampleComponent extends React.Component {
  state = {
    externalData: null};static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.id ! == prevState.prevId) {return {
        externalData: null.prevId: nextProps.id,
      };
    }
    return null;
  }

  componentDidMount() {
    this._loadAsyncData(this.props.id);
  }
  
  / / use componentDidUpdate
  componentDidUpdate(prevProps, prevState) {
    if (this.state.externalData === null) {
      this._loadAsyncData(this.props.id);
    }
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }

  _loadAsyncData(id) {
    this._asyncRequest = asyncLoadData(id).then(
      externalData= > {
        this._asyncRequest = null;
        this.setState({externalData}); }); }}Copy the code

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <AAA />
    </div>
  );
}

class AAA extends React.Component {
  state = {
    age: 66
  };

  add = (a)= > {
    this.setState({ age: this.state.age + 1 });
  };
  render() {
    return (
      <div>
        <ChildA onChangeParent={this.add} age={this.state.age} />
      </div>); } } class ChildA extends React.Component { state = { num: 88 }; static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.age ! == prevState.age) { return { age: nextProps.age }; } return null; } add = () => { this.setState({ num: this.state.num + 1 }); }; render() { const { onChangeParent } = this.props; console.log("render", this.state); return (<>
        <div onClick={onChangeParent}>change</div>
        <div onClick={this.add}>add</div>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <AAA />
    </div>
  );
}

class AAA extends React.Component {
  state = {
    age: 66
  };

  add = (a)= > {
    this.setState({ age: this.state.age + 1 });
  };
  render() {
    return (
      <div>
        <ChildA onChangeParent={this.add} age={this.state.age} />
      </div>); } } class ChildA extends React.Component { state = { num: 88, age: this.props.age }; add = () => { this.setState({ num: this.state.num + 1 }); }; componentDidUpdate() { if (this.props.age ! == this.state.age) { console.log("componentDidUpdate", this.props.age); this.setState({ age: this.props.age }); } } render() { const { onChangeParent } = this.props; console.log("render", this.state); return (<>
        <div onClick={onChangeParent}>change</div>
        <div onClick={this.add}>add</div>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code

class ExampleComponent extends React.Component {
  state = {
    id: '123456'}; render(){const {id} = this.state;
    // When the ID changes, the key changes, and the component is reinitialized
    return <ExampleComponent key={id} id={id}/>; } } class ExampleComponent extends React.Component { state = { externalData: null, }; / / don't need to use getDerivedStateFromProps or componentWillReceiveProps / / static getDerivedStateFromProps (nextProps, prevState) { // if (nextProps.id ! == prevState.prevId) { // return { // externalData: null, // prevId: nextProps.id, // }; // } // return null; // } componentDidMount() { this._loadAsyncData(this.props.id); } componentWillUnmount() { if (this._asyncRequest) { this._asyncRequest.cancel(); } } render() { if (this.state.externalData === null) { // Render loading state ... } else { // Render real UI ... } } _loadAsyncData(id) { this._asyncRequest = asyncLoadData(id).then( externalData => { this._asyncRequest = null; this.setState({externalData}); }); }}Copy the code

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <AAA />
    </div>
  );
}

class AAA extends React.Component {
  state = {
    age: 66
  };

  add = (a)= > {
    this.setState({ age: this.state.age + 1 });
  };
  render() {
    return (
      <div>
        <ChildA onChangeParent={this.add} age={this.state.age} />
      </div>); } } class ChildA extends React.Component { state = { num: 88 }; static getDerivedStateFromProps(nextprops, state) { console.log("getDerivedStateFromProps", nextprops); if (nextprops.age ! Age) {return {// give an identity status: false, // age: nextprops. Age, onChangeParent: nextprops. } return null; } add = () => { this.setState({ num: this.state.num + 1 }); }; processData(){ console.log("process",this.props); return this.props.age; } componentDidUpdate() {// If (! this.state.status) { this.setState({ age: this.processData(), status: true }); console.log("componentDidUpdate"); } } componentDidMount() { this.setState({ age: this.props.age, status: true }); } render() { const { onChangeParent } = this.state; console.log("render", this.state); return (<>
        <div onClick={onChangeParent}>change</div>
        <div onClick={this.add}>add</div>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Copy the code

ifsetStateThe updated values remain the same, so will these lifecycle hooks still fire?

• Even if you set the same value every time, the update will still be triggered

import React, {Component} from 'react'

export default class LifeCycle extends Component {
    static defaultProps = {
        name: 'counter'
    };

    constructor(props) {
        super(props);
        this.state = {number: 0};// Initialize the default state object
        console.log('1. Constructor initializing props and state');
    }
    
    componentWillMount() {
        console.log('2. ComponentWillMount component to be mounted ');
    }
    
    componentDidMount() {
        console.log('4. ComponentDidMount completed ');
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('Counter', nextProps, nextState);
        console.log('5. ShouldComponentUpdate asks if component needs to be updated ');
        return true;
    }

    componentWillUpdate() {
        console.log('6. ComponentWillUpdate component to be updated ');
    }

    componentDidUpdate() {
        console.log('7. ComponentDidUpdate component updated ');
    }

    add = (a)= > {
        this.setState({number: this.state.number });
    };

    render() {
        console.log('(3) render rendering')
        return (
            <div style={{border: '5px solid red', padding: '5px'}} >
                <p>{this.state.number}</p>
                <button onClick={this.add}>+</button>
            </div>)}}Copy the code

As future versions of React roll out asynchronous rendering, indomStages prior to being mounted can be interrupted and restarted, resulting incomponentWillMount,componentWillUpdate,componentWillReceivePropsIt is possible to fire multiple times in an update, so side effects that only want to fire once should be placed incomponentDidMount 中

• That’s why you put asynchronous requests incomponentDidMountIn, not incomponentWillMountFor backward compatibility

reference

Update on Async Rendering

React v16.9.0 and the Roadmap Update

You may not need to use derived state

Recommended reading

Cookie, Session, Token, JWT

React Hooks 【 nearly 1W words 】+ project combat

React SSR: + 2 projects

Implement a simple Webpack from 0 to 1

Webpack translates existing Typescript schemas