web-dev-qa-db-ja.com

Reactフック： 'useMutationEffect'と 'useLayoutEffect'の違いは何ですか？

使用法の点でuseMutationEffectとuseLayoutEffectの違いは何ですか？

私はオンラインで利用可能なすべての資料を読みました（ただしこれに限定されません）

  1. フックリファレンス
  2. ケントによるブログ投稿

useEffectと他の2つのフックの違いは明らかです。しかし、useMutationEffectとuseLayoutEffectの違いはまだ明らかではありません。

実行の順序は次のとおりです。

  1. useMutationEffect
  2. useLayoutEffect
  3. useEffect
reactjsreact-hooks
8
Abdul Rauf

まず、理解する必要があります レンダリングのさまざまなフェーズ

ユーザーに表示されるDOMミューテーションは、ユーザーが視覚的な不整合を認識しないように、次のペイントの前に同期的に起動する必要があります。この特定のケースでは、useMutationEffectまたはuseLayoutEffectのいずれかを使用して、視覚的な更新のブロックを実行する必要があります。これら2つの違いは、DOMからレイアウトを読み取る場合はuseLayoutEffectを使用する必要があることだけです。それ以外の場合は、useMutationEffectを使用する必要があります。

  1. useMutationEffect

レイアウトフェーズの前、つまりReactがDOMミューテーションを実行するのと同じフェーズ中に同期的に起動します。これを使用して、DOM測定/レイアウトの読み取りを行わずにカスタムDOMミューテーションのブロックを実行します。

  1. useLayoutEffect

すべてのDOMミューテーションの後、ペイントフェーズの前に同期的に起動します。これを使用して、DOMからレイアウト（スタイルまたはレイアウト情報）を読み取り、レイアウトに基づいてカスタムDOMミューテーションのブロックを実行します。

  1. useEffect

レンダリングが画面にコミットされた後、つまりレイアウトとペイントのフェーズの後に実行されます。視覚的な更新のブロックを回避するために、可能な限りこれを使用してください

更新：useMutationEffectフックは フックAPI から https://github.com/facebook/反応/プル/ 14336 。 （クレジット： Dhaval Patel ）

11
Abdul Rauf