Component-Lifecycle

LifeCycle

各構成部品には独自のライフサイクルがあり、各ライフサイクルに必要なアクションを書き込むことができます.
コンポーネントの寿命は、通常、ページレンダリングの準備中に開始され、ページが消えたときに終了します.

クラス構成部品ライフサイクル(Class Component Lifecycle)

クラスエレメントの場合、リアクターはライフサイクルを操作できる内蔵関数を提供します.
render():画面を描画します.
componentDidMount():画面を描画し、後で実行します.
ComponentDidUpdate():画面が描画され、画面内で変更が発生した場合に実行されます.
componentWillUnmount():構成部品が消失したときに実行します.
これは上でコードで埋め込み関数を記述する方法です.

import { Component } from "react";
import Router from "next/router";

export default class CounterPage extends Component {
  componentDidMount() {
    console.log("!!!마운트!!!");
    this.inputRef.current?.focus();
  	}
    render() {
    <div>렌더</div>
    }
  }

上はComponentDidMountをコードで書いたときです.
レンダリング後に一度だけ実行するのが特徴です.
画面に入るたびに写真を表示したり、inputウィンドウにフォーカスを入力したりするときに使用できます.

import { Component } from "react";
import Router from "next/router";

export default class CounterPage extends Component {
  componentDidUpdate() {
    console.log("수정되고 다시그려짐!!!!");
  }
    render() {
    <div>렌더</div>
    }
  }

これはComponentDidUpdateのコード作成です.
この組み込み関数は、レンダリング時に画面上の任意の値が変化するたびに機能します.
ただし、最初のレンダリングでは実行できません.

import { Component } from "react";
import Router from "next/router";

export default class CounterPage extends Component {
  componentWillUnmount() {
    console.log("컴포넌트 사라짐!!!!!!!");
  }
    render() {
    <div>렌더</div>
    }
  }

componentWillUnmountのコード作成.
コンポーネントWillUnmountは、構成部品が消失した後に動作します.
コンポーネントがAPIリクエストを発行し続ける場合、コンポーネントが終了ボタン以外の方法で終了すると、コンポーネントはAPIリクエストを発行し続けます.
不要なデータの浪費を避けるために使用できます.
すなわち、終了ボタンではなく、別の方法で終了すると、コンポーネントは消えてしまうので、API要求は一緒に終了してもよい.

機能コンポーネントのライフサイクル

関数型素子はクラス素子と大きく異なる.
反応器が提供するHooks useEffectを使用します.
useEffectの詳細については、次の節で説明しますが、今日は使い方だけを簡単に説明します.

import { useEffect } from "react";

export default function CounterPage() {

 useEffect(() => {
   console.log("마운트됨!!");
   inputRef.current?.focus();
 }, []);
 
  return (
      <div>렌더</div>
  );
}

以上のコードはクラスエレメントのdidmount操作と全く同じです.
初めて実行する.

import { useEffect } from "react";

export default function CounterPage() {

  // 1
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  });
  
  // 2
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  }[any]);
 
  return (
      <div>렌더</div>
  );
}

上記のコードはクラス素子のdidupdateと同様の動作を実行するが、これは初めて実行される点で異なる.
それ以外は、動作はまったく同じです.
また、2番目に作成されたuseEffectの後ろには依存配列と呼ばれる配列があり、その中に変数が含まれている場合は、その変数を変更するたびにレンダリングされます.
何も置かないとdidmountのように一度実行されます.
didupdateを使用する場合は、空でない値の依存配列を記述する必要はありません.

import { useEffect } from "react";

export default function CounterPage() {

 useEffect(() => {
   return () => {
     console.log("컴포넌트 사라짐!!!!!!!");
   };
 }, []);

  return (
      <div>렌더</div>
  );
}

上記の動作はクラスエレメントのwillmunmountと全く同じです.
使う場合も同じです.
userEffectの詳細は、個別に配置されます.