反応セット#4

#4いよいよスタート！ぶるぶる震える!

部品値をuseStateで置換するには

これまで、学習の中で動的なものは一つもなかった.
従来,関数型素子では状態管理はできなかったが,反応16.8にHooksという機能が導入され,新しいパターンが示された.
useStateもReactionの機能です.
まず仮装の例を挙げる.
srcディレクトリにCounterというファイルを作成します.

Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

AppファイルでCounterをレンダリングします.

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

では、画面が出てきました.ダイナミックな部分を担当するアクティビティを設定します.
次のようにCounterを変更します.

Counter.js

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

ここで、関数onIncreaseとonDecreaseは、それぞれコンソールで+1と-1を出力するように設定されています.
その後、onClickイベントをbuttonラベルに接続します.
ここにいたら

onClick={onIncrease()}

関数呼び出しに設定すると、レンダリング時に実行されるため、ボタンラベルをクリックしてもコンソールは撮影されません.
したがって、関数値は正しい方法でのみ出力されます.
結果は...


出力効果が良く見える様子です.
さあ.次に、reactive usState関数を使用して構成部品のステータスを管理します.
次のようにCounterを変更します.

Counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

useStateを入れるには、反応パックに下記のように記入するだけです.

import React, { useState } from 'react';

const [number, setNumber] = useState(0);

useStateを使用する場合は、ステータスのデフォルト値をパラメータとして使用します.この関数を呼び出すと、配列が返されます.最初の値は変更されたステータス値で、2番目の値はsetterという関数です.

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

Setter関数は、パラメータが渡す値を最新値に設定します.
このとき、h 1ラベルに0ではなく{number}という値をレンダリングします.
結果は...

+1をクリックして3になります.
今回は、少し違う方法でSetter関数の値を更新してみます.
Counterファイルを少し修正して...

Counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

変換された部分...

const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

setter関数に以下の状態をパラメータとして追加するのではなく、コールバック関数を使用して値を更新する関数をパラメータとして試みます.
結果は...

ステータス値を異常なくレンダリングしています.
注:ベロフォードとのモダン反応
感じ:

今日、私たちはUseStateを理解するのに少し時間を費やしました.これは反応の中で最もよく使われる本かもしれません.

以降も他のスキルを学ぶことができることを望んでいます.