React の useEffectOnce フック

ReactReactBeginner
今すぐ練習

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

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

はじめに

この実験では、Reactにおいて特定の条件が真になったときにコールバック関数を最大1回だけ実行するためにuseEffectOnceフックをどのように使用するかを学びます。これは、コンポーネントがマウントされるときやボタンがクリックされるときなど、特定のアクションを1回だけ実行したい場合に役立ちます。この実験が終了するとき、Reactアプリケーションでこのフックをどのように実装するかについて、より深い理解を得ることができます。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38381{{"React の useEffectOnce フック"}} react/event_handling -.-> lab-38381{{"React の useEffectOnce フック"}} react/hooks -.-> lab-38381{{"React の useEffectOnce フック"}} react/use_state_reducer -.-> lab-38381{{"React の useEffectOnce フック"}} end

React useEffectOnceフック

VM内には既にindex.htmlscript.jsが用意されています。一般的には、script.jsstyle.cssにのみコードを追加すればよいです。

以下のコードは、when条件が真になったときにcallbackを1回だけ実行する関数useEffectOnce(callback, when)を実装しています。

この関数を実装するには:

  • useRef()フックを使用して、エフェクトの実行状態を追跡するための変数hasRunOnceを作成します。
  • when条件が変更されたときにのみ実行されるuseEffect()フックを使用します。
  • useEffect()フックの中で、whentrueで、かつエフェクトが以前に実行されていないことを確認します。両方がtrueの場合、callbackを実行して、hasRunOncetrueに設定します。
const useEffectOnce = (callback, when) => {
  const hasRunOnce = React.useRef(false);
  React.useEffect(() => {
    if (when && !hasRunOnce.current) {
      callback();
      hasRunOnce.current = true;
    }
  }, [when]);
};

ここにuseEffectOnce()の使用例を示します:

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  useEffectOnce(() => {
    console.log("mounted");
  }, clicked);
  return <button onClick={() => setClicked(true)}>Click me</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

この例では、useEffectOnce()はボタンが初めてクリックされたときにコンソールに「mounted」とログを出力するために使用されています。useEffectOnce()フックには2つの引数が渡されます:実行するcallbackとチェックするwhen条件です。when条件はclicked状態に設定されているため、callbackclickedが初めてtrueになったときにのみ実行されます。

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます!あなたはReact useEffectOnceフックの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。