【React Native】stateを用いた変数管理 #React

更新した値を画面に即時反映させたい

React Nativeにてインタラクティブなアプリを作る際、基本的な処理の流れとしては

ボタン等を押してメソッドを実行
メソッド内で計算、計算後の値を算出(場合によっては結果をDBに反映)
画面に反映

が一般的な流れである。
stateを理解してこの一連の流れが出来るようになったらアプリ作りが捗ったので紹介。

カウンターアプリの例

上記アプリの例として、カウンターアプリが上げられる。

画面要素

現在のカウント
カウントアップボタン
カウントダウンボタン

仕様

「カウントダウンボタン」または「カウントアップボタン」を押したら、現在のカウントが増減

実装的な処理詳細

「カウントダウンボタン」または「カウントアップボタン」を押した際、現在のカウントをインクリメントする
インクリメントした後の数字が現在のカウントに反映される

クラス内の変数を更新しただけでは、画面は再描画されない

class無いに変数を用意して数字を更新したとしても、画面の数字は更新されない。


<View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={() => 
        {
          counter++
          console.log("after count:" + counter)
        }
      }>
        <Text style={styles.buttonText}>+1</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={() => 
        {
          counter--
          console.log("after count:" + counter)
        }
      }>
        <Text style={styles.buttonText}>-1</Text>
      </TouchableOpacity>
      <Text style={styles.paragraph}>
       current count:{counter}
      </Text>
    </View>

ブラウザで実際に試してみる

リンクに動く(数字は動かない)React Nativeのサンプルをおいておきました。
https://snack.expo.io/3n9E_BhFU

変数を更新するだけは再描画されない

描画を更新するには、状態変化をReactに通知して、renderを再度呼んでもらう必要がある。

stateによる状態管理、変更

stateとは、値の変更が常時監視され、値が変わったら画面が再描画される変数である。

stateの定義

stateはuseStateを用いて初期化し、以下のように宣言できる。
useStateの引数は変数の初期値である。


const [counter, setCounter] = useState(0)

counterは数を保持する変数、setCounterはcounterを更新するためのsetterである。

stateの勘所は、setterを用いて値を更新することでstateの変更を通知し、画面を再描画してもらうことである。

setter経由で更新した場合、Reactで更新を検知し

値の更新

counterを直接更新するのではなく、setCounterを用いて更新を行う。

setCounter(counter + 1)

引数に更新後の値を渡すことで値が引数の値で更新される。
今の値に対して差分更新する場合は、上記例のように現在の値と差分で計算すれば良い。

ブラウザで実際に試してみる

リンクにsateを用いて正常に動くReact Nativeのサンプルをおいておきました。
https://snack.expo.io/NdXVNsFnA

参考:学習に用いたUdemyのコース

react nativeの経験が無い中でアプリを作り始めて、こちらのコースで学習しながら進めている。
今回はstateを学んだのでその紹介。

The Complete React Native + Hooks Course [2020 Edition]
https://www.udemy.com/course/the-complete-react-native-and-redux-course/