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;

react-lifecycle-methods-diagram

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

new API

old API

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---