React LifeCycle API

old API & new API 不可以混用

demo

https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr?file=/src/components/child.js



import React, { Component } from "react";

import log from "../utils/log";

class Child extends Component {

  constructor() {

    super();

    this.state = {};

  }

  // new API

  getDerivedStateFromProps() {

    log(`child getDerivedStateFromProps`, 11);

  }

  getSnapshotBeforeUpdate() {

    log(`child getSnapshotBeforeUpdate`, 22);

  }

  // old API

  componentWillMount() {

    log(`child WillMount`, 1);

  }

  componentDidMount() {

    log(`child DidMount`, 2);

  }

  componentWillReceiveProps() {

    log(`child WillReceiveProps`, 3);

  }

  shouldComponentUpdate() {

    log(`child shouldComponentUpdate`, 4);

    return true;

    // return true or false;

  }

  componentWillUpdate() {

    log(`child WillUpdate`, 5);

  }

  componentDidUpdate() {

    log(`child DidUpdate`, 6);

  }

  componentWillUnmount() {

    log(`child WillUnmount`, 7);

  }

  componentDidCatch(err) {

    log(`child DidCatch`, err);

  }

  render() {

    log(`child render`);

    return (

      <div className="child">

        <h1>child-lifecycle-order</h1>

      </div>

    );

  }

}

export default Child;