ショッピングセンタープロジェクト

これはアップル社のスピーチに基づいた文章です.

Lifecycle

構成部品を作成、削除したり、関連するステータスを変更して再レンダリングできます.こう言うのは構成部分の人生です.
このときはHookの真ん中で口を挟むことができます
たとえば、このコマンドは、Detail構成部品が表示される前、削除前、および変更後に介入します.
Lifecycle Hook

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 Mount 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
  }
}

UserEffect()

userEffect()におけるコードの実行条件

要素が初めて現れ、ロード終了後(専門用語mount)

.

構成部品の再レンダリング後(専門用語に更新)

ページの上部にusEffectをインポートします.

userEffect()を使用します.

にコールバック関数を追加します.

コールバック関数では、Detail素子が初めて出現した後に実行したいコードを書くことができます.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    //코드를 적습니다 여기
  });
  return (
    <HTML많은곳/>
  )
}

構成部品が消失した場合のコードの実行(専門用語でアンインストール)
returnを入れ、return値に入れた関数は構成部品が消えたときに実行されます.もちろん、他の場所で作成した関数名も使用できますし、arrow関数も使用できます.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    return function 어쩌구(){ 실행할 코드 } 
  });
  return (
    <HTML많은곳/>
  )
}

複数使用可能
作成順に機能を実現します.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    //1빠로 실행할 코드
  });
  useEffect(()=>{
    //2빠로 실행할 코드 
  });
  return (
    <HTML많은곳/>
  )
}

適用

Detailsページで作成した通知ウィンドウがコンポーネントの実行時に2秒後に消えたい場合は?

ずっと覚えてる!UI要素の内容をStateとして保存します.
私の大まかな考えは、公告ウィンドウがtrueになるまでfalseであれば消えてしまいます.

usStateでは、noticeという変数をtrue値として保存します.

2.条件文を使用してスイッチツールを作成します.
通知がtrueなら?次のコードを実行します.そうでなければ、次の空の値を実行します.消えるという意味です.

userEffectでは、コールバック関数であるsettimeoutもタイマと同様にコールバック関数を受け入れる.したがって、notice関数を変更することでnoticeをfalse値に変更します.しかし、条件で書いた2秒後.

など)
前述したように、userEffectは、素子の出現時に実行されるが、更新時にも実行される.
このため、画面が表示され、2秒後に通知は消えますが、画面が更新されると通知も消えます.
したがって、関数の末尾にカッコを付けてstate名を作成できます.これは、ステータス変更時にのみnoticeが実行されることを意味します.

[]ロビンフッドなら?
構成部品を更新しても、絶対に実行されません.これは、コンポーネントのロード時に一度だけ実行したい場合に使用するテクニックです.
Tip)settimeout使用時の注意点
Detailにアクセスしてから2秒後に通知を消す機能を作成しました.(前述の通り)
しかし、もし2秒前にそのページを離れたら?
残りのタイマーのため、変な現象が発生する可能性があります.
したがって、素子が消失した場合には、消去タイマのコードを追加することもできる.
前述したように、userEffect関数のreturn値は、素子が消失したときに殺されるコードであり、return値を用いてタイマーを消去するコードを追加するだけでよい.