Reactとは
ユーザインタフェースを作成するためのライブラリです。
勉強中
ここから先は勉強中で、全く調べてない、 推測によるものも含みます。
以下の要素があるような感じ。
- 仮想DOM
- JSX
- サーバサイドレンダリング(SSR)
- コンポーネント
- 状態管理
仮想DOMは別記事で書いたとおり、JavaScriptオブジェクト。
これを作ることがサーバサイドレンダリングそのものとも言える。
で、h関数を使うらしく、それでは分かりにくいために生まれたのが、
h関数をHTMLっぽい記述にしたもの。それがJSX。
コンポーネントはReactとは独立しているが、
大雑把に言えば「独自要素」を作るようなもの。<todo>とか。
仮想DOMを前提とするなら、実装は変わってもそんなに概念は変わらないと思われるが、 5の状態管理が独自性がいろいろありそうな感じ。
あと、独自要素を作るなら、以下の概念は必要と思われる。
- 表示を制御する方法
- 操作を制御する方法
- 状態を管理する方法
- 他のコンポーネントとの関係性
- 親子関係や、id参照
状態管理
以前はRedux一択と言われていたのですが、個人的には気に入らないです。
- あなたはReduxを必要としないかもしれない – You Might Not Need Redux by Dan Abramov | maesblog
- Redux作者による忠告。local stateにReduxを使うべきでないという話。
- 「3種類」で管理するReactのState戦略
- 状態を3種類に分けた方がいいという話。上のlocal stateと同じ話もある。
- Reactの高度な状態管理にRedux+Sagaが定番となっていることについての疑問 – MMiyauchi Blog
- Redux+Sagaが定番となっていることについての疑問。
なので、自分としてはこんな感じ。
- まずはContextを使う。
- 大きくなってきたら専用のライブラリを導入する。
- Reduxを使う場合はRedux Toolkitを使う。こっちの方がパッと見た目シンプル。
- RecoilやReact Queryという手も。
公式サイト
- React - A JavaScript library for building user interfaces
- alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.