視覚効果ガイド-クリーンアップ

これはVisual Guide to useEffectの第2章である
ここでは、レンダリングされる最初の時間から何秒が経過したかを記録するコンポーネントです.


エフェクトは、コンポーネントがアンマウントされた後に実行し続けることがあります
さて、我々は我々のアプリで2つのページがあるとしましょう.これらのページの1つだけがコンポーネントを持っています.ここでは、ページ間を切り替えるときに何が起こるかです.

コンポーネントがアンマウントされた後、ログが実行され続けます.それを防ぐ方法?

Every effect may return a function that cleans up after it

React performs the cleanup when the component unmounts

React Docs - useEffect

効果はあらゆる実行で蓄積されるかもしれません
私たちのコンポーネントを変更しましょう.すべての再レンダリング後にエフェクトを実行するには、依存配列を削除する必要があります.

コンポーネントを再描画し続けると、新しい間隔を作り続けます.どのように、我々は最後の間隔を保つだけですか?

React also cleans up effects from the previous render before running the effects next time

React Docs - useEffect

いつクリーンアップを使用するには?
エフェクトを追加するたびに、コンポーネントがアンマウントされるときに何が起こるかを考えます.この効果は走り続けますか.もしそうならば、クリーンアップ機能を提供してください.あなたがそれをするならば、効果があらゆる実行で累積するとき、それは第2のユースケースを自動的にカバーします.
この効果は、コンポーネントのアンマウント後に実行されません.
クリーンアップを必要としません.

useEffect(() => {
  document.title = props.title
})

この効果は、コンポーネントのアンマウント後に実行されます.
クリーンアップが必要です.

useEffect(() => {
  const handler = () => console.log(window.pageYOffset)
  window.addEventListener("scroll", handler);
  return () => window.removeEventListener("scroll", onScroll);
})

視覚反応コンテンツの毎日のスニペットをお探しですか?