はじめに
この実験では、React の useComponentDidUpdate
フックについて学びます。このフックを使うと、コンポーネントが更新された直後にコールバックを実行できます。これは、クラスコンポーネントの componentDidUpdate()
ライフサイクルメソッドに似ています。このフックを使って特定の状態変数の変化を追跡し、それに応じてカスタムロジックを実行する方法を探ります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、React の useComponentDidUpdate
フックについて学びます。このフックを使うと、コンポーネントが更新された直後にコールバックを実行できます。これは、クラスコンポーネントの componentDidUpdate()
ライフサイクルメソッドに似ています。このフックを使って特定の状態変数の変化を追跡し、それに応じてカスタムロジックを実行する方法を探ります。
VM には既に
index.html
とscript.js
が用意されています。一般的には、script.js
とstyle.css
にのみコードを追加すればよいです。
このコードは、useComponentDidUpdate
と呼ばれるカスタムフックを提供しており、コンポーネントが更新されるたびに指定された callback
関数を実行します。このフックがたどる手順は以下の通りです。
useRef()
フックを使って mounted
変数を作成します。この変数はコンポーネントがマウントされたかどうかを追跡します。useEffect()
フックを使って、フックが最初に実行されたときに mounted
の値を true
に設定します。callback
関数を実行します。condition
が提供された場合、フックはその依存関係のいずれかが変更された場合にのみ実行されます。componentDidUpdate()
ライフサイクルメソッドと同じように動作します。以下がコードです。
const useComponentDidUpdate = (callback, condition) => {
const isMounted = React.useRef(false);
React.useEffect(() => {
if (isMounted.current) {
callback();
} else {
isMounted.current = true;
}
}, condition);
};
const App = () => {
const [value, setValue] = React.useState(0);
const [otherValue, setOtherValue] = React.useState(1);
useComponentDidUpdate(() => {
console.log(`Current value is ${value}.`);
}, [value]);
return (
<>
<p>
Value: {value}, other value: {otherValue}
</p>
<button onClick={() => setValue(value + 1)}>Increment value</button>
<button onClick={() => setOtherValue(otherValue + 1)}>
Increment other value
</button>
</>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。
おめでとうございます!あなたは React の useComponentDidUpdate フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。