Component Life Cycle

Component Creation and Mount

コンストラクタ(コンポーネントを作成する部分)

コンポーネントWillMount(コンポーネントがアップロードされる)

レンダリング(最初のレンダリング、最初のレンダリング方法はmountと呼ばれます)

アセンブリDidMount(アセンブリマウント時)

Component Update

setStateを呼び出すと、まずrenderが呼び出され、更新が完了した後にコンポーネントDidUpdateが実行されます.

render

コンポーネントDidUpdate(コンポーネント更新時)

Component Remove

componentが離れたときに呼び出されます.(他のページに移動する場合など)

コンポーネントWillUnmount(コンポーネントが削除された場合)

[注意]

ソース:コンポーネントライフサイクルマップ

Full Code

import React from 'react';
import './App.css';
//eslint-disable-next-line
import PropTypes from "prop-types";

class App extends React.Component{
  constructor(props){
    super(props);
    console.log("hello");
  }
  state ={
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count +1 }));
  };
  minus = () => {
    this.setState(current => ({count: current.count -1 }));
  };
  componentDidMount(){
    console.log("component rendered");
  };
  componentDidUpdate(){
    console.log("i just updated");
  }
  componentWillUnmount(){
    console.log("Goodbye, cruel world");
  }
  render(){
    console.log("i'm rendering");
    return(
      <div>
      <h1>im a class {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>Minus</button>
      </div>
    ) 
  }
}
export default App;