第2の料理/ReactのsetStateがワカラナイ

※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。

↑キレ味ってなんだ…?

昨日なんとなく焼きそばに飽きたので今日は鮭の炊き込みご飯を作った。これも僕のレパートリーの1つだが、ご飯を炊くのは時間がかかるので敬遠していた。

作り方はかんたんで、ご飯を炊くときに醤油・鮭・えのき・鮭を一緒に入れるだけだ。こだわるなら昆布も。炊き上がるころには部屋が醤油のいい香りに包まれている。

今日もReactのドキュメントを読んでいた。だいたい理解しながら読み進んでいるが、やはりReactがパフォーマンスを出すために中でゴニョゴニョやっていることを理解するのが難しい。たとえばここ。再描画の回数を減らすためにsetStateは即時に実行されないことがあるという。しかし例示されているコードでどのような不具合が起きる可能性があるのか、failの一言だけではよくわからない。

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

これの解決策としてsetStateに関数を渡すことで確実にsetStateが行われるタイミングでのpropsの値を取得する方法が紹介されているが、これによって何を解決しているのだろうか。

だいたい家にいた/ナウいReact

※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。

強い意思があったわけではないが、今日は夕方に買い物に行った以外は家にいた。

以前からやりたいと思っていた‎@kfurumiyaさんの『正真正銘のReactだけの不純物なしでReact入門』をやった。「不純物なし」というのは意外と厄介で、複雑な状態管理はReduxでやるのが普通なのに対して、このチュートリアルではReactの新しい機能であるHooksを使っている。

Reactは形作りが面倒だが、そこに当てはめていくことで巨大なアプリでも比較的小さい負担で作れるというのがこれまでの認識だった。しかしReactの真価である差分検知システムを効率的に動かすためには無駄な再描画をさせないための工夫が必要らしい。慣れればこれも流れ作業のように書けるのかもしれないが、現時点では難しそうだ。

チュートリアルに沿ってひとりツイッターを作ったあと、本家に近づけるために

  • 空白の投稿はできない
  • 投稿したら入力欄が空白になる
  • 削除できる

の3つの機能を追加してみた。見た感じでは正しく動いている。今後はnodeでなんかいい感じにコンパイルする、テストを書く、Ajax通信するなどをやってみたい。