Hook - useEffect(Lifecycle)

11284 ワード
React useEffect lifecycle テキストリンク

ライフサイクル


人:一般的には時間が経つにつれて、誕生から死までの瞬間の段階的な過程です.
開発:プログラムの実行と終了

Reactのライフサイクル


誕生:初期化素子の画面上の表示(Mount)-ex
変更へんこう:ステータス変更またはリフレッシュ(update)-ex例外処理
死亡:画面上の構成部品(UnMount)-exメモリを消去します.

ジェネリック構成部品を作成する場合は、次の関数を使用します(関数構成部品には適用されません)。


Mount : ComponentDidMountupdate : ComponentDidUpdateUnmount : ComponentWillUnmount
  • stateはクラスエレメントにも使用可能ですがreact hooksを使用できます.
    関数構成部品の前に「use」を付けることができます.
    =>useState、useEffect、useRefなど…

    • なぜ関数型素子を使うのですか?


    クラス構成部品は関数構成部品よりも複雑で、より多くの重複コードが必要です.

    useEffect



  • マウント時

    const [count, setCount] = useState(0)
const [text, setText] = useState("")

useEffect(() => {
    console.log("Mount!")
},[])
    コンソールは、構成部品の取り付け時にのみ撮影されます.
    =>[]デップが空の配列に配置されている場合、Mountステップでのみ機能します.
    =>ボタンを押してcountを増やし、更新時はMountステップではないので撮らない.

  • 更新時

    const [count, setCount] = useState(0)
const [text, setText] = useState("")

useEffect(() => {
    console.log("Update!")
})
    構成部品を更新するたびにコンソールが撮影されます
    =>[]深度を使用しない
    =>最初のマウント時に同じコンソールで撮影され、countとtextが更新されるたびに同じコンソールで撮影されます.
    const [count, setCount] = useState(0)
const [text, setText] = useState("")

useEffect(() => {
    console.log(`cont is update : ${count}`)
},[count])
    countを更新するたびにコンソールが撮影されます
    =>[]count(更新されたターゲット)をデップに挿入
    =>初回マウント時にcountが更新されるたびにコンソールが撮影されます

  • Unmount時

    const UnmountTest = () => {
    useEffect(() => {
        console.log('Mount!')
        return () => {
            // Unmount 시점에 실행되게 됨
            console.log('Unmount!')
        }
    }, [])

    return <div>Unmount Testing Component</div>
}

const Lifecycle = () => {
    const [isVisible, setIsVisible] = useState(false)
    const toggle = () => setIsVisible(!isVisible);

    return <div style={{ padding: 20}}>
        <button onClick={toggle}>ON/OFF</button>
        {isVisible && <UnmountTest />}
    </div>
}
    useEffectで使用return 콜백함수unmountポイントで運転
  • isVisible && <UnmountTest />:短絡評価
    =>isVisibleは、trueの後ろのunmountTestがtrueであることを確認する必要があります.そうしないと、後ろのunmountTestがtrueになります.
    =>IsVisibledlfalseの場合、短絡はfalseとして評価され、UnmountTestにも実行されないため、実行されません.

    • 공부하며 정리&기록하는 ._. 씅로그
    Javaシーケンス化の5:付録1最も簡単なシーケンス化コード
    白駿16234号:人口移転