Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明

//propsから派生した状態を取得する static getDerivedStateFromProps(props,state){
	リターンプロップ
}

<div id="test"></div>
  <!-- react core ライブラリをインポート -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- react-dom を導入して、DOM を操作するための react をサポートする -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- jsx を js に変換するには babel を導入します -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <スクリプトタイプ='text/babel'>
    // コンポーネントクラスを作成する Count extends React.Component{
    // コンストラクタ コンストラクタ(props){
      console.log('Count --- コンストラクター')
      スーパー(小道具)
      // 状態を初期化します this.state = {count:0}
    }

    //フックcomponentDidMount(){
      console.log('Count --- componentDidMount')
    }

    // コンポーネントのアンインストールボタンのコールバック death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // +1 を実装する
     追加 =()=>{
      // 元の状態を取得する const {count} = this.state
      // ステータスを更新 this.setState({count:count+1})
    }

    // 強制更新ボタンのコールバック force=()=>{
      this.forceUpdate()
    }

    静的 getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps', プロパティ, 状態)
      リターンプロップ
    }

    // コンポーネント更新バルブを制御する shouldComponentUpdate(){
      console.log('Count --- shouldComponentUpdate')
      // 戻り値が false の場合、バルブはデフォルトで閉じられます。
      真を返す
    }

    //コンポーネント更新完了フックcomponentDidUpdate(){
      console.log('Count --- コンポーネントの更新回数')
    }

     // コンポーネントはアンインストールされます hook componentWillUnmount(){
      console.log('Count --- componentWillUnmount');
    }

    与える（）{
      console.log('カウント --- レンダリング')
      const {count} = this.state
      戻る（
        <div>
          <h2>現在の合計: {count}</h2>
          <button onClick={this.add}>クリックして +1</button>  
          <button onClick={this.death}>クリックしてコンポーネントをアンインストールします</button>  
          <button onClick={this.force}>強制的に更新するにはここをクリックします（データは変更されません）</button>  
        </div>
      ）
    }
  }
  
  // コンポーネントのレンダリング ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </スクリプト>

<div id="test"></div>
  <!-- react core ライブラリをインポート -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- react-dom を導入して、DOM を操作するための react をサポートする -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- jsx を js に変換するには babel を導入します -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <スクリプトタイプ='text/babel'>
    // コンポーネントクラスを作成する Count extends React.Component{
    // コンストラクタ コンストラクタ(props){
      console.log('Count --- コンストラクター')
      スーパー(小道具)
      // 状態を初期化します this.state = {count:0}
    }

    //フックcomponentDidMount(){
      console.log('Count --- componentDidMount')
    }

    // コンポーネントのアンインストールボタンのコールバック death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // +1 を実装する
     追加 =()=>{
      // 元の状態を取得する const {count} = this.state
      // ステータスを更新 this.setState({count:count+1})
    }

    // 強制更新ボタンのコールバック force=()=>{
      this.forceUpdate()
    }

    静的 getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps', プロパティ, 状態)
      nullを返す
    }

    更新前にスナップショットを取得する(){
      console.log('getSnapshotBeforeUpdate');
      「eee」を返す
    }

    // コンポーネント更新バルブを制御する shouldComponentUpdate(){
      console.log('Count --- shouldComponentUpdate')
      // 戻り値が false の場合、バルブはデフォルトで閉じられます。
      真を返す
    }

    //コンポーネント更新完了フックcomponentDidUpdate(preProps,preState,snapshotValue){
      console.log('Count---1componentDidUpdate',preProps,preState,snapshotValue);
    }

     // コンポーネントはアンインストールされます hook componentWillUnmount(){
      console.log('Count --- componentWillUnmount');
    }

    与える（）{
      console.log('カウント --- レンダリング')
      const {count} = this.state
      戻る（
        <div>
          <h2>現在の合計: {count}</h2>
          <button onClick={this.add}>クリックして +1</button>  
          <button onClick={this.death}>クリックしてコンポーネントをアンインストールします</button>  
          <button onClick={this.force}>強制的に更新するにはここをクリックします（データは変更されません）</button>  
        </div>
      ）
    }
  }
  
  // コンポーネントのレンダリング ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </スクリプト>