tobb422のブログ

スタートアップエンジニアの奔走

<読書メモ> React Design Patterns and Best Practices 2nd Edition

はじめに

先日、React + TypeScript を使った新規プロジェクトを担当することになりました。
TypeScript は普段から使用していることもあり、
まあ大丈夫かなと思っていたのですが、React が約2年ぶり?くらいだったため、
思い出すことを目的に React Design Patterns and Best Practices という本を読みました。
本投稿は、その読書メモです。
※ 読書メモなので、私が読むことを想定して書き殴ります。
ターゲットとしている層は、「既にReactでアプリケーションを書いている人がステップアップするという位置づけ」らしいです。

↑ あとで気がついたが、なぜかこの書籍だけはてなブログの「Amazon商品紹介」で選択しても表示できない...
https://www.amazon.co.jp/gp/product/1789530172

雑感としては、知らなかった概念や機能を知るきっかけになったが、
プロダクトに導入するには、この書籍だけでは理解を深めるのが難しかったです。
(英語力の問題では....?w)

(私が)初めて知った & 使えそうと思った概念?機能? をまとめてみる

React Hooks

今回の新規プロジェクトで既に使ってみています。
後述する React.memo とそうなんですが、関数で定義していくことに優しい世の中になっているように感じます。
結果、気がついたらほぼ全てのコンポーネントfunction で定義してました。
正直、自分の英語力と技術力ではよくわからなかったので、
以下の記事とドキュメントを利用して、キャッチアップしました。
(まだ、 useStateuseEffect くらいしか使えていないのですが....)
qiita.com ja.reactjs.org

React Context

コンポーネント間で渡すデータを props でやり取りするのではなく
コンポーネントツリー内で共通で利用できるデータといったイメージですかね...?
手元で動かしてみて、こんな感じかと理解した程度で、プロダクト内に取り入れられていないです...
ja.reactjs.org

Function As Child

HoC と比較して語られているケースを良く見ます。
要は、childrenコンポーネントを渡すのではなくて、関数を渡すということです。
最初この章を読んだときは、そんなことができるんだ〜と思いましたw
コンポーネントで切り替わっていく state 等で動的に子コンポーネントを変化させたいときに有効なのでしょうか?
テストで試した程度で、まだプロダクト内では使えていないのですが...
qiita.com

react-motion で実際に使用されているソースコードを見つけたので、
そちらを見るとなんとなく理解が深まるかもしれません。
該当のコンポーネント

Pure Component → React.memo

qiita.com PureComponent は、知っていたのですが
その関数版というか、 React.memo が公開関数になっており、
関数で定義したコンポーネントをラップして、返してくれるようです。
recomposepure みたいなものですね
ただ、なんでも React.memo を使えば正解というわけではなさそうです。用法用量お守りください。
qiita.com

React.Fragment

ja.reactjs.org ドキュメントに書いてあると通りなのですが、無駄なノードを追加しなくて済む書き方と認識しておくので問題なさそうです。

まとめ

非常に雑ですが、読書メモなのでこれで良しとします。
序盤でも触れましたが、普段開発してて知らない概念や機能に触れることができたのはよかったかな〜
と思っています。 ( → ドキュメントに書いてるけど...)