02. useEffect

4477 ワード
hook React テキストリンク

a.付随効果を生じるホック

useEffect(() => {
    document.title = `업데이트 횟수: ${count}`
})
  • 要素をレンダリングすると、ユーザ効果に登録するパラメータ関数
    • が呼び出される.
  • レンダリング結果がDOMに反映され、
    • が非同期で呼び出される

    b.依存性配列

    useEffect(() => {
    getUserInfo(userId).then(data => setUser(data));
}, [userId, func1]);
  • useEffectの2番目のパラメータは、依存配列を加えることができる.
  • 依存配列の役割は、配列に含まれる値が変化すると、副作用の発生を制限できることである.
  • は、通常、依存配列に入る値には、素子内部の状態値や属性値、領域変数、領域関数などがある.ここで、ステータス値変更関数(ex>setUser)は例外です.
  • 要素外関数も依存配列を記入する必要はありません.
  • 依存アレイに空のアレイが追加された場合、副作用は、構成部品の作成時にのみ呼び出されます.

    • c.useEffectの戻り関数

     useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
	return () => {
        window.removeEventListener('resize', onResize);
    }
}, []);
  • userEffect戻り関数が呼び出された時点は次のとおりです.
    1.次のuserEffectを呼び出す前に呼び出す.
    2.構成部品が消失する前に(アンインストール)最後に呼び出されます.
    • [ProblemSolving]Back-2615グラビア(実装)
    十二、JavaScript装飾モード