react memo
To DO
redux-first-routerを使ったアプリ
できれば違いを体感する
storybookについて
storybookとは？
nextjsについて
コンポーネント
見た目と機能をひとまとまりにしたもの
Virtual DOM
DoMがブラウザに表示するインターフェース
Virtual DOMはDoMとついになっているReactが持っている仮想的なDOM
そのため、Virtual DOMをいくらいじっても問題ない
最終的にはVirtual DOMの結果をDOMへ反映
＋差分のみを更新してくれる
React.createElementで生成できる
JSX
全部のDOMでVirtual DOMを用いるのは流石に現実的でない
JSを拡張した言語であるJSXを使えば開発の効率を上げることがでｋりう？
Flux
複雑なクライアントアプリケーションでも、ロジックと表示要素を分けることができるアーキテクチャ
https://raw.githubusercontent.com/lgvalle/lgvalle.github.io/master/public/images/flux-graph-simple.png
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内の下記のようなコード
code:javascript
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のタイミングで実行される