医学生わくばの欲張り技術ブログ

〜E資格を取りに行く!〜

<#5 React Native>〜useStateを学ぶ〜

f:id:PYEcracker99:20200922143701p:plain

 

わくばです!

 

 今回はuseStateについて説明してみます。useStateというのは関数コンポーネントの状態を管理する機能を言います。状態ってなんぞやと思うかもしれませんが、これは具体的にコードで示した方がわかりやすいので、単純な機能を作ってみました。

 

useStateの例

 まず以下にReactNativeのソースコードを添付します。水の温度をState(状態)として管理し、それによって水の物性変化を管理しています。

 基本的な文法としてはconst [xxxx,setXxxx]=useState[初期値]という形を取ります。xxxxの部分は自分で好きなように名前を決められます。ただしsetのあとは大文字です。以下のプログラムではmatter( temperatureとかにしとけばよかった.......)という名前でstateを扱い、初期値は-40としています。

 

緑の枠の中で、state(温度)によって水がどんな物性になるかを場合分けし、赤の枠でボタンを描画しています。

f:id:PYEcracker99:20200930154400j:plain

水の状態を管理するプログラム

  以下のリンクでこのプログラムが実際にどんな挙動を示すのか見れますのでぜひリンクに飛んで見てみてください。ボタンをクリックすると温度が変化しそれによって水の物性も変化していきます。

i97s8.csb.app

 

 なんとなくおわかりいただけましたか。このように関数コンポーネントにstateを保持させ、setStateでstateを更新することで、関数コンポーネント挙動をコントロールすることができます。ボタンをクリックするごとに30℃ずつ温度が上昇していますよね。ボタンを押すことでonPressのsetStateが機能し、state の値を+30しています。

  

 このようにstateを管理することでインタラクティブにUIを変化させることができるんです。

 

余談 : Hooks

 このuseStateというのは本来「use」はついていなくて、stateというクラスコンポーネントのプロパティとして用いられていました。確かに関数というは処理が済んだらそれで終わりですから、値をずっと保持して随時更新するというのはクラスの方が得意ですよね。しかしクラスコンポーネントはコードが大きくなるとものすごく複雑になるらしく保守性などが非常に低下するそうです。そこで開発されたのがこのReact Hooksという機能(API)で、これによって関数コンポーネントでも状態の保持とその更新が可能になりました。僕は大きなコードを扱ったことがないので実感はありませんが、React公式は完全に関数コンポーネントによる記述を推進していくようです。

 

「use~」がついたHooksは他にもたくさんあるので少しずつ自分の口で説明できるように詳解していこうと思います

 

では。