reactのstateがごちゃつき始めるくらいまで使ってみた。
stateがごちゃついてなんかつらいなこれ…ってなり始めるくらいまでreact.jsを使ってみました。 初心者なりにつらかったところを記録しておきます。 react.jsの環境構築や使い方については、初心者向けの記事は良い記事がたくさんあるので、そちらにお任せします。
つくったもの
ソートするやつをつくりました。 0~99までの100個の数値を、バブルソートでソートします。
もっとちゃんとしたやつをどこかで見たことがるって?はい、私も見たことがあります。いいのです。学習用なので、これでいいのです。
herokuにデプロイしてみました。
https://evening-brushlands-42735.herokuapp.com/
https://github.com/ytnk531/react-tutor
ソースコードも公開しています。ただしフロントエンドド素人が作ったものであるため、くれぐれもお手本にはしないように( ´∀` )
reactのコンポーネントで状態管理するのはつらい?
下記の記事では、reactのコンポーネントの状態管理はreduxに任せてしまおう、と言っています。
qiita.com
reactのコンポーネントはstateと呼ばれるプロパティを持っていて、通常はこのstateプロパティを変化させてコンポーネントの状態を変更します。
reduxは、コンポーネントごとに状態を持つのはやめて、reduxを使うことで一か所で管理してしまおう、というライブラリです。こういったライブラリが推奨されるということは、コンポーネントで状態管理することに辛さがある、ということが示唆されているわけですが、いまいちそのつらみが理解できませんでした。
つらくなるまでやってみた
reactを使うならreduxと一緒に使いなさい!と教えていただきましたが、いまいち嬉しさがわかりませんでした。reduxで状態管理する嬉しさがわからないというよりは、reactで提供されているstateを使って状態管理する困難さがわからなかったのです。
ということで、ある程度つらくなるまで使ってみました。
フロントエンドは経験も知識ありませんでしたが、react自体は難しい物じゃないのでわりとすんなりと使えるようになりました。
作るのに必要だった知識
子要素は筆者の事前の理解度や利用経験。
- HTML
- JavaScript
- 基本的なシンタックスとconsole.logとアロー関数がわかる程度。
- Greasemonkeyで簡単な自動入力スクリプトを書いたことがある
- SVG
- ベクターの画像だよね?
stateで状態管理するつらさ
stateの更新がめんどくさい
stateを操作するときは、以下のように記述します。
// value1を1増やす this.setState(prevState => ({ value1: prevState.value1 + 1 });
状態を変えるたびにこれをやるのはしんどいってもんですね。
stateの反映されるタイミングが謎
setState()は非同期で呼ばれます。いつstateが更新されるかは定かではないのです。
例えば、下記のコードは無限ループします。
'''javascript
// finishの初期状態はfalse
while(this.state.finish) {
this.setState({finish: true});
}
'''
やっぱり散らばるのはよくない
コンポーネント間で共有したい値があったりします。 stateを外部から参照する方法があるにはあるのですが、とてもやりづらいうえに非推奨だそうです。
各コンポーネントの状態が、変更されているかわかりにくくなってしまうのは、確かに悪いことに感じます。 状態がいつ変更されているのかを追跡する手段が用意されていなければ、バグを見つけにくくなってしまうでしょう。 一つのクラスの中にstateが留められていたとしても、それはやはり同じでしょう。
結局つらかったか
すみません、stateを持ったコンポーネントを一つしか作らなかったので、そんなにつらくなかったです。
というか、stateもったコンポーネント同士で親子関係を作ると値の変更がしにくいので、子コンポーネントは状態を持たずにpropsで渡した値が状態になるような作りにするほかなかったです。
つまるところ、規模が大きくなってくると、一つのコンポーネントでたくさんの状態を管理したり、コンポーネント間で値が伝搬していくように作らなければならないように思います。
これがコンポーネントで状態を管理するつらさ…で…いいのか…な…。
つまづいたところ
コンポーネントをループで生成する h3poteto.hatenablog.com