はじめに
この実験では、React における useIsomorphicEffect
フックの使用方法を検討します。このフックを使用することで、サーバー上では useEffect()
が、クライアント上では useLayoutEffect()
が解決され、環境に関係なく同じ効果が実行されるようになります。この実験を通じて、React アプリケーションで一貫性のある信頼性の高い効果を作成するために useIsomorphicEffect
フックをどのように使用するかを学びます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、React における useIsomorphicEffect
フックの使用方法を検討します。このフックを使用することで、サーバー上では useEffect()
が、クライアント上では useLayoutEffect()
が解決され、環境に関係なく同じ効果が実行されるようになります。この実験を通じて、React アプリケーションで一貫性のある信頼性の高い効果を作成するために useIsomorphicEffect
フックをどのように使用するかを学びます。
VM 内には既に
index.html
とscript.js
が用意されています。一般的には、script.js
とstyle.css
にのみコードを追加すればよいです。
サーバー上での useEffect()
とクライアント上での useLayoutEffect()
を適切に使用するために、typeof
を使って Window
オブジェクトが定義されているかどうかを確認します。定義されている場合、useLayoutEffect()
を返し、そうでなければ useEffect()
を返します。これを実装する方法の例を以下に示します。
const useIsomorphicEffect =
typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
その後、コード内では次の例のように useIsomorphicEffect()
を使用できます。
const MyApp = () => {
useIsomorphicEffect(() => {
window.console.log("Hello");
}, []);
return null;
};
ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);
これにより、コンポーネントがマウントされたときにコンソールに 'Hello' が表示され、サーバーとクライアントの両方で正常に動作します。
右下隅の「Go Live」をクリックして 8080 番ポートでウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
おめでとうございます!あなたは React useIsomporphicEffect フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。