Reactの特徴的な機能の一つとして、”State”があります。
通常、Javascriptでは画面に表示中の値を書き換えるためには、”変数の値を書き換える”コードだけでなく、”書き換えた変数の値をDOMへ描画しなおす”コードも書く必要があります。
しかし、ReactのStateという特殊な変数を使用することで、Stateに格納された値を書き換えるだけで、書き換えられたState変数を参照しているDOM部分を自動で更新し、新しい値を表示してくれます。
さて、このState変数ですが、Reactのクラスコンポーネント(Class Component)では次のように書くことができます。
Class Hoge extends React.component {
constructor(props, context) {
super(props, context);
// stateの初期化
this.state = {
hoge: false,
huga: {
piyo: '',
},
};
}
}
ところが、関数コンポーネント(Functional Component)では、上記のような書き方をすることができません。
// 関数コンポーネントの例
const Hoge = (props) => {
return(){
<div>Hello World</div>
}
}
実は、クラスコンポーネント、関数コンポーネントはもともと使用されるべき場所が決まっており、クラスコンポーネントは最初に呼び出される、おおもととなるコンポーネントに使用されるべきとなっており、関数コンポーネントは、こういった元のクラスコンポーネントからpropsで値を受け取って処理を行う子コンポーネントとして使用されるべき、ということになっています。
とはいえ、コンポーネント内だけで完結するStateを使用したいとか、どうしても親コンポーネントからのStateでは取り回しがしづらい、など、関数コンポーネント内でStateが使えないと困る場合があります。
実は、React 16.8から、”ステートフック”と呼ばれる機能が追加されました。
このステートフックを使用することで、関数コンポーネントであってもStateを生成することができるようになりました。
関数コンポーネント内でStateを使用する場合は、useState()関数を使用します。
使い方は次の通りです。
//state変数を表示
const Hoge = (props) => {
const [huga, setHuga] = useState(''); //分割代入
setHuga('test');
return(){
<div>{huga}</div> {/*<div>test</div>が出力される*/}
}
}
useState()の引数部分はstateを初期化する際に入れる値で、クラスコンポーネントでいう
this.state = {
huga: '',
}
にあたります。
useState()を実行すると、返り値として配列が返され、0番目にState本体、1番目にこのState変数を更新する関数が入っています。
上記の分割代入の書き方は、返された配列の0番目の要素を”huga”に代入し、1番目をsetHugaに入れる、という意味になっています。
上記のコードで生成された”setHuga()”関数は、Stateの”huga”を更新する専用の関数となっていて、setHuga()の引数部分にStateの”huga”に新しくセットしたい値を入れるだけで、”huga”の中身が更新されるようになっています。
一見すると何をやっているのかかなりわかりづらいですが、一度知ってしまえばかなり明快です。
関数コンポーネントネントでもStateが使えることがわかれば、かなり楽にReactを使ったプログラムが進められそうですね。
参考:
