react useState Hook

useState

反応は既存のバニラシナリオと多くの違いがある.
1つのユーザーステータス管理が最も速く、最も簡単です.
useStateはFunction Componentで使用され、16.8 verで更新されます.
useStateに加えて、Hookと呼ばれる他のState管理関数も存在します.
Class Componentとの違いは、次の点です.
Renderを使うか使わないかの違い
しかし、ここでは、Hookについて記録します.

function Count() {
  return (
    <div>
      <h1>The number is 0</h1>
      <button>Add</button>
      <button>Minus</button>
    </div>
  );
}

カウントを非常に簡単な例にします.

[Add]または[Minus]をクリックすると、数値が動的に計算され、再レンダリングされます.
バニラスクリプトを使用してこのプロセスを実行すると、非常に長く、面倒になる可能性があります.
しかし、JSXやstateを直接管理することは面倒を減らすことができます.
動的に追加するために、次のコンポーネントを変更しました.

function Count() {
  const [number, setCount] = useState(0);

  const addCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const minusCount = () => {
    if (number <= 0) {
      setCount(0);
    } else {
      setCount((prevCount) => prevCount - 1);
    }
  };

  return (
    <div>
      <h1>The number is {number}</h1>
      <button onClick={addCount}>Add</button>
      <button onClick={minusCount}>Minus</button>
    </div>
  );
}

実行結果

react usStateを用いて簡単なカウント素子を作成した.
今は1行1行解けています.

const [number, setNumber] = useState(0)

ここでは非構造化割当てにより2つの変数にusStateを割り当てた.
userStateのパラメータは初期値を設定します.
初期値は指定され、値の関数を更新できます.
更新値を含む変数のペアを指定します.
React Hook Docsを参照
非構造化割当てを書き込み操作すると、配列の各0,1個に割り当てることができます.

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

しかし、配列へのアクセスは、非構造化によって割り当てられる良い方法ではありません.
使ったほうがいいです.
ステータス値変数を既存のエンティティに追加すると、
イベントによっては、ステータス値が変更され、再表示されます.
単純に加減ボタンでカウントします.

  const addCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const minusCount = () => {
    if (number <= 0) {
      setCount(0);
    } else {
      setCount((prevCount) => prevCount - 1);
    }
  };

setCountの呼び出し時に以前の値を更新できます.
ここでnumberの代わりに関数を追加する理由は
これは関数式の更新です.
setCountを同時に複数回行うと値が変更されるためです.
これは後でさらに勉強するときに記録されます.
次はこれらの関数をイベントに掛けて終わります.

  return (
    <div>
      <h1>The number is {number}</h1>
      <button onClick={addCount}>Add</button>
      <button onClick={minusCount}>Minus</button>
    </div>
  );

呼び出されていない理由は、イベントが発生したときにのみ起動されるためです.
構成部品を返す場合は、レンダーエラーが発生しないように、少なくとも1つの親要素が必要です.

整理する

関数型構成部品を作成する場合は、Hooksを使用してステータス管理を行います.

ステータス値格納変数とステータス値更新関数を更新します.useStateはペアです.

の非構造化割当てによって処理される.