Component Life Cycle

8400 ワード
component テキストリンク

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;
    (十一)TestNG学習の道—BeanShell高級用法
    bindが1つあることを知って申請して、むだに食べます!!