React
Reference
Udemy | 最短で学ぶReactとReduxの基礎から実践までの雑メモ
ブラウザ特化がreactDom
Reactはフレームワークではなく、Viewのライブラリ
componentを作っていく
種類としては2つ Functional component Class Component
親からpropsを渡す componentを再利用していく。(componentは変更する必要がないので再利用しやすい)
状態を持つ場合はstate stateを持たない場合は、props？
余計な情報を持たせないように、どこにstateを持たせるかは絞って考える
setState()は、stateと更新する作業とrender実行するという2つを実行している。
※setStateでやらないとrenderが走らないので、変わらない
どこにstateを持つかは難しいなあ。ルールを作らないとぐちゃぐちゃになりそう
のように、書くと展開される
毎回全部renderするのではなく、エミュレータみたいなので、差分を覚えておいて、変更があったら、そこだけrenderするみたいな感じらしい。
React内部の処理の効率化のために、IDを振っといてくださいみたいな。
配列のときに a
b
c
があって、bを消すと、
a
c
になるけど、
2番目bを削除して、cが2番目になって、3番目のcを削除するような感じだとコストがかかる。
だから、最初からIDを振ってあげて、
1:a
2:b
3:c
として、IDが2のやつは消すというのだと楽。みたいなお作法
componentのライフサイクルメソッドというものがある。
要所要所でいろんなhookを用意してあって、それぞれのメソッドを実装しておくと勝手にそのメソッドを読んでくれる。
大きくわけると3つのレーンがある
初期化レーン - constructor - componentWillMoun() - render - componentDidMount():読み込まれたタイミングで決め打ちでデータを撮ってきたいみたいな - イベント待ち受け
updateレーン
unmountのレーン
(親のpropsが変わって、このコンポーネントが描画されないタイミング)
ReactRouter これでSPAになる。Webの通信がはしらない
exactは、/でやっちゃうと全部マッチしちゃうので必要。
ルーティングはコンポーネントごとにやってもよいかも。
historyAPIはブラウザが持ってるAPI
historyAPIをReact Routerが監視していて、React Routerが新しいコンポーネントをブラウザに返す。
※サーバへの通信がリンクごとに発生しない。
もちろん銀の弾丸ではない。
全ページの情報を1発目に、落としてくる必要がある。
もしトップページだけ高速に動作させたいみたいなことがあれば、そこだけ切り出したりみたいなことが必要になる。
Redux
stateの管理を大規模になってもわかりやすくできるように。
fluxという考え方
componentとstoreとaction
導入前はcomponentで全部やってた
flaxをフレームワークに落とし込んだのがRedux
Reduxの3原則 - 1つのstoreにすべてを管理させる - stateはread-only(actionを発行してstateを更新しましょう) - 変更は純粋functionを使ってやりましょう(副作用を与えない・同じ引数であれば同じ結果のfunction)
action→reducer→store
元の状態と新しい引数を受け取って、新しいstateを返すfunctionがreducer
Presentational Component(componentsのディレクトリ)
propsを受け取って表示しているふつーのやつ？
Container Component(containersのディレクトリに入れておくらしい)
storeをsubscribeして、actionを発行したり更新を検知したりする処理が入る
ReactにはContextという機能がある。
こどものComponentに共有したい値を定義して、こどものComponentはthis.context.colorみたいな感じで使える(グローバル変数的な)
providerというライブラリでできる
親はproviderでラップ。子はconnectというライブラリで使える
redux-devtoolsは、ブラウザの拡張で、どのようにactionが発行されて、どのようにstateが変わるかがみれる。
testは現在の状況を再現するには、どうすればいいのかが記載されている。
(複雑になっていったときに便利になる)
Reducerの実装は、キーごとに。
Middlewareとは？
ActionとReducerの間に割って入って処理を差し込めるプラグインみたいなもの。 ロギングとか。
thunkはstoreのdispathが呼ばれるたびに、storeそのものがわたされる。
チェーンして実行できる。
中身は、actionが関数。
connectと連動してる。componentとactionを綺麗に切り分けることができる。