react memo
To DO
redux-first-routerを使ったアプリ
できれば違いを体感する
storybookについて
storybookとは？
e2eのテストどうやるの（公式）
nextjsについて
コンポーネント
見た目と機能をひとまとまりにしたもの
Virtual DOM
DoMがブラウザに表示するインターフェース
Virtual DOMはDoMとついになっているReactが持っている仮想的なDOM
そのため、Virtual DOMをいくらいじっても問題ない
最終的にはVirtual DOMの結果をDOMへ反映
＋差分のみを更新してくれる
React.createElementで生成できる
JSX
全部のDOMでVirtual DOMを用いるのは流石に現実的でない
JSを拡張した言語であるJSXを使えば開発の効率を上げることがでｋりう？
Flux
複雑なクライアントアプリケーションでも、ロジックと表示要素を分けることができるアーキテクチャ
View
Reactコンポーネント相当
ユーザーからなにか操作があった場合は、その内容を示すActionを生成する
Action
Actionは単なるオブジェクト
どんな行動があったかを表す
Dispatcher
EventEmitter
DispatchされたデータをStoreが受け取る
ActionをstoreへDispatch
Store
アプリケーションの状態とロジックを保持
ロジックとはActionに対して、アプリケーションの状態をどう変更するか？
Viewはこれを感知する
Redux
Fluxの一種
3原則がある
1. Single source of truth
アプリの状態をモノリシックなオブジェクトとして管理
2. State in read-only
アプリケーションの状態は直接変更できない
Actionをdispatchする（↑のFluxの図の通り）のが唯一の方法
3. Changes are made with pure functions
状態の変更は純粋関数（ステートレス）でしか買えられない
Reducer
アクションを受け取って、stateを変更する
Object.assignメソッドを使って、値をコピーしてょうがよい
参照渡しだと、stateが変更される可能性があるため
Babel
トランスパイラの一種
ECMAScript6以上の文法で記述されたJSを広い環境で動作できる
reactではbabel＋babel-preset-react（reactをbabelでトランスパイルするためのプラグイン）でJSXをトランスパイルすることができる
babel-cliの変換はnodejsで実行したい場合やnpmパッケージとしたい場合有効
webpack
モジュールバンドラー
モージュルをまとめて一つの静的なJSファイルとする
import hoge from 'hoge' とかブラウザでは動かない（npm）React tips
bind
constructor内の下記のようなコード
this.addTodo = this.addTodo.bind(this); ↑thisが何をさすかが重要
thisはAppクラスのように思えるが、実際はこれを実行するDoMとかがthisになる
したがって、bindすることによって、addTodo内のthisはAppクラスだよと強制する必要あり
ライフサイクル
基本下記3種類
マウント時
データの更新時
エラーハンドリングに関するメソッド
concatとpushの違い
一番の違いは新しい配列を作るか？（concat）もともとの配列に要素を追加するのか（push）の違い
reactでstateを扱う場合はconcat使ったほうが良いかも（stateを更新する場合はsetStateなので）
react-redux
reduxでactionをdispatchして、reducerでstateの状態を変え、subscribeメソッドでstateが変化したときに、viewを更新することが実現できた。
しかし、stateを全部に配布するのはやばすぎるので、それを管理したい
↑を解決したのがreact-redux
コンポーネントにstateとdispatcherメソッドをpropsで渡すことができる
middleware
reduxの機能を拡張できる
立ち位置的には、reducerのタイミングで実行される