状態変数に入る前に、React コンポーネントの動作を詳しく説明しましょう。

React コンポーネントとは何ですか?

React では、コンポーネントはユーザー インターフェイス (UI) の一部を表す再利用可能なコードです。 HTML ボタンのように単純なものもあれば、完全なページのように複雑なものもあります。

React の状態変数とは何ですか??

React では、状態変数は、コンポーネント固有のデータを保存する 特別なタイプの変数です。

なぜ状態変数が必要なのでしょうか??

React では、コンポーネントは React アプリケーションの構成要素です。関数ベースまたはクラスベースにすることができます。機能コンポーネントという場合、通常は return Node 要素または JSX 要素 (HTML のように見えるが実際には JavaScript コードである特別な構文) を指します。ブラウザーにコンテンツを表示するには、React は機能コンポーネントを呼び出して要素をレンダリングするだけです。コンポーネント/関数が呼び出される/レンダリングされるたびに、その変数は再宣言され、再初期化されます。これにより、コンポーネントはデータに加えられた変更を保持できなくなります。通常の JavaScript 変数は、再レンダリング (関数呼び出し) をまたいで保持されないため不十分です。

考えられる解決策の 1 つは、グローバル変数を使用し、それを関数に反応するパラメーターとして渡すことですが、これにより密結合が発生し、コードの理解、テスト、保守が困難になる可能性があります。

この問題に対処するために、React チームは解決策を考え出しました。状態変数と呼ばれます。

コンポーネントがレンダリング間で何らかの情報を「記憶」する必要がある場合は、状態変数を使用します。状態 変数は useState フックを呼び出すことによって宣言されます 。

不変であり、状態アップデータ関数によってのみ更新できます。この関数は、値が変更されるたびにコンポーネントの再レンダリングをトリガーします。この動的な動作により、React コンポーネントはアクティブなデータ更新を返し、理想的なユーザー エクスペリエンスを提供できるようになります。 React は、状態変数に加えられた変更を追跡します。変更が検出されると、React は調整と呼ばれるプロセスを使用して DOM ツリーを自動的に再レン​​ダリングします。

コンポーネントのメモリを記述する