React LifeCycle API All In One

React LifeCycle API All In One

Errors

old API & new API 不可以混用

React LifeCycle Methods Diagram

new API

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

old API

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/state-and-lifecycle.html

demos

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;

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---