hook LayoutEffetsとは何ですか?
hook-flowというプロジェクトが保存されています.
useLayoutEffect
useLayoutEffect(() => {
effect
return () => {
cleanup
};
}, [input])useEffect
useEffect(() => {
effect
return () => {
cleanup
}
}, [input])userlayoutEffectとuserEffectの違い
userEffect hookを使用すると、DOMのレイアウト配置とフェードアウトが完了した後にこの効果関数が呼び出されます.
したがって,状態値が効果に依存すると,少し不便なユーザ体験を招く可能性がある.
useLayoutEffect Hookは、これらの問題を解決するために現れたHookです.
LayoutEffect Hookは上の画像のようにブラウザが画面を塗装する前に実行し、画面にDOMを描画する前に実行し、コードの実行順序も変化します.
TL;DR
userEffectの効果は、DOMが画面に描画された後に呼び出されます.
userLayoutEffectの効果は、DOMが画面に表示される前に呼び出されます.
したがって、レンダリングする状態を効果領域で初期化する必要がある場合は、useLayoutEffectを使用してユーザーエクスペリエンスを取得します.
Reference
この問題について(hook LayoutEffetsとは何ですか?), 我々は、より多くの情報をここで見つけました https://velog.io/@ldhoon/hookLayoutEffets-란テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol