React の useComponentDidMount フック

はじめに

この実験では、ReactにおけるuseComponentDidMountフックの使い方を学びます。このフックを使うと、コンポーネントがマウントされた直後にコールバックを実行できます。これは、クラスコンポーネントのcomponentDidMount()メソッドと似ています。この実験が終わるとき、このフックの使い方と、Reactプロジェクトでどのように役立つかをより深く理解しているでしょう。

Skills Graph

ReactのuseComponentDidMountフック

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

コンポーネントがマウントされた直後にコールバック関数を実行するには、useEffect()フックに空の配列を2番目の引数として渡します。これにより、コンポーネントがマウントされたときに提供されたコールバックが1回だけ実行されることが保証されます。以下に示すuseComponentDidMount()関数は、このフックを使って、クラスコンポーネントのcomponentDidMount()ライフサイクルメソッドと同じ動作を実現しています。

const useComponentDidMount = (onMountHandler) => {
  React.useEffect(() => {
    onMountHandler();
  }, []);
};

const Mounter = () => {
  useComponentDidMount(() => console.log("Component did mount"));

  return <div>Check the console!</div>;
};

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

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

まとめ

おめでとうございます！あなたはReactのuseComponentDidMountフックの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習してください。