React の useComponentDidMount フックをマスターする

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

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 でさらに多くの実験を行って練習してください。