[React] useEffect vs useLayoutEffect

4592 ワード
React react native テキストリンク
useEffect hookを使うだけで、useLayoutEffect hookがわかり、違いを記録したいと思います.
2つのhookはスクリーンをレンダリングするときに実行されます.これは同じです.しかし、いくつかの違いもあります.
1) useEffect画面は、レイアウトとレイアウトが終了した後に実行されます.
次はコードです
function app() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(25);
  },[]);
  return(
  	<div>{count}</div>
  )
}
上記のコードは、スクリーンレンダリング時にcount stateを25に変更してレンダリングされます.しかし、画面をリフレッシュすると、表示されたcount値はinitialStateで、0であり、すぐに25になります.
->スクリーンをレンダリングする場合は、まずcount stateをinitialStateに変換し、レイアウトと図面を完了してから、stateを設定した25に変換します.
ではuseLayoutEffectはどのように機能しますか?
2) useLayoutEffect画面は、レイアウトと図面を描く前に最初に実行されます.
次はコードです
function app() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    setCount(25);
  },[]);
  return(
  	<div>{count}</div>
  )
}
useEffectを使った時とあまり変わらないように見えます.しかし、useLayoutEffectの使用はuseEffectの使用とは異なり、count stateはinitialStateではなくsetCountに設定されており、最初からこの点が見られる.
したがって、画面をレンダリングするときにステータス値に非常に依存する場合は、useEffectを使用するよりも、useLayoutEffectを使用すると、目的の結果が得られる可能性があります.
企業連絡PJT開発ログ
C#Winformでよく見られるEditorおよびその他の経験