ReactJS には、コンポーネント ロジックを簡素化および強化するための フック が導入されています。 React で最もよく使用されるフックの 1 つは useState フックで、コンポーネントの状態を管理します。これがどのように機能するかを理解すると、React の可能性を最大限に引き出すことができます。
この初心者向けガイドでは、フックとは何か、useState を使用して状態を初期化および更新する方法、およびさまざまな種類の状態の保持と更新について詳しく説明します。最終的には、コンポーネント内の状態を自信を持って管理できるようになります。飛び込みましょう!
フックは、クラス コンポーネントを作成せずに state やその他の React 機能を使用できるようにする関数です。フックが登場する前は、コンポーネントの状態の管理はクラス コンポーネント内でのみ可能でした。 useState のようなフックを使用すると、機能コンポーネントに状態を追加して、機能コンポーネントをより多用途にすることができます。
React は次のようないくつかのフックを提供します:
フックは状態管理を簡素化し、複雑なクラスベースのコンポーネントの必要性を減らします。フックの美しさは、よりクリーンで読みやすいコードを維持しながら、必要な機能を提供できることにあります。
機能コンポーネントでの useState の初期化は簡単です。まず、React からフックをインポートし、コンポーネント内でそれを呼び出します。構文は次のようになります:
import React, { useState } from 'react'; function Counter() { // Declare state variable and its updater function const [count, setCount] = useState(0); return (); }You clicked {count} times
前の例を微調整して、状態にアクセスする方法を示しましょう:
現在の数: {count}
このコードはカウント状態にアクセスし、それを動的に表示します。Current count: {count}
setter 関数 を使用して行われます。この関数は更新された値を取得し、その新しい状態でコンポーネントを再レンダリングします。
カウンターを増減する方法の例を次に示します:
React は、状態が更新されるたびに、その変更が UI にシームレスに反映されるようにします。 React ではCurrent count: {count}
状態の更新は非同期である ことを覚えておくことが重要です。つまり、setter 関数を呼び出した直後に更新された状態が常に表示されるわけではありません。
文字列を状態に保持する:
配列を状態に保持する:Current count: {count}
オブジェクトを状態に保持する:Current count: {count}
React の useState フックを使用すると、これらのさまざまなタイプのデータを管理できますが、次に説明するように、オブジェクトや配列などの複雑なタイプを更新する場合は注意が必要です。Current count: {count}
不変に更新することが重要です。 React はネストされたオブジェクトを深く比較しないため、オブジェクトを直接変更しても再レンダリングはトリガーされません。代わりに、更新された値を使用して 新しいオブジェクト または 配列 を作成する必要があります。
例: オブジェクトの更新この例では:Current count: {count}
ここ:Current count: {count}
useState は複数のデータ型を保持できますか?
状態の更新は非同期ですか?
オブジェクトや配列などの複雑な状態を更新するにはどうすればよいですか?
useState を使用してゼロからヒーローになったので、それをプロジェクトに組み込んで、React の魔法が実際に動作するのを見てみましょう!
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3