React の useIsomporphicEffect フック

ReactReactBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、React における useIsomorphicEffect フックの使用方法を検討します。このフックを使用することで、サーバー上では useEffect() が、クライアント上では useLayoutEffect() が解決され、環境に関係なく同じ効果が実行されるようになります。この実験を通じて、React アプリケーションで一貫性のある信頼性の高い効果を作成するために useIsomorphicEffect フックをどのように使用するかを学びます。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") subgraph Lab Skills react/jsx -.-> lab-38391{{"React の useIsomporphicEffect フック"}} react/hooks -.-> lab-38391{{"React の useIsomporphicEffect フック"}} end

React useIsomporphicEffect フック

VM 内には既に index.htmlscript.js が用意されています。一般的には、script.jsstyle.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 でさらに多くの実験を行って練習してください。