Upgrade to Pro — share decks privately, control downloads, hide ads and more …

キッチハイク社内勉強会 / 2021-02-10

キッチハイク社内勉強会 / 2021-02-10

Takuma Yamamoto

June 21, 2021
Tweet

More Decks by Takuma Yamamoto

Other Decks in Programming

Transcript

  1. Flux という新しいアーキテクチャの登場 • 2014年5月 Facebook F8 にて Flux というアーキテクチャが提唱される •

    アプリケーション内のデータフローを単方向化する https://youtu.be/nYkdrAPrdcw
  2. データフローを単方向化し「予測可能」な状態にする • Action → Dispatcher → Store → View というデータフロー

    • どこでどんな処理が行われるか、処理の流れを把握できるようになった https://youtu.be/nYkdrAPrdcw
  3. • jQuery とかで Flux 実装するとDOM操作が複数回発生 • 画面描画においてレンダリング処理が一番コストが高い • DOM操作を行う度にレンダリング処理が行われる •

    DOM操作の回数を減らすことが大切(コードにも見受けられる) なぜ Flux での実装がされてこなかったのか? 参照:https://eh-career.com/engineerhub/entry/2020/02/18/103000
  4. Reducer という概念をもつ Redux が誕生 • Flux の課題を解決する Reducer という概念が生まれる •

    Redux は Reducer という概念を持った状態管理ライブラリである • Flux と同様に単方向データフローである https://redux.js.org/
  5. Redux 3原則:State is read-only • Action を受けとって State を変更することは Flux

    と同じ • State は常に読み取り専用で、変更は Action を通じてのみ可能 https://redux.js.org/tutorials/essentials/part-2-app-structure
  6. Redux 3原則:Single source of truth • Flux と違い Store がひとつになり、データ管理の場所が一箇所になった

    • アプリケーション全体の State をひとつのオブジェクトツリーで表現 https://redux.js.org/understanding/thinking-in-redux/three-principles
  7. Redux 3原則:Changes are made with pure functions • State の更新は

    Action を受け取った Reducer で処理される • あるアクションに対する State の更新処理が一箇所にまとまった • State の更新処理の順番を指定しやすくなった https://redux.js.org/tutorials/essentials/part-2-app-structure
  8. Redux によって解決された React の課題 • Store のデータを参照できるので、Props のバケツリレーがなくなる • それにより、不要な仮想

    DOM 再レンダリングを抑えることができる 引用元:https://www.techscore.com/blog/2018/12/02/react-when-the-render-will-be-called/
  9. Redux と比べて、 • 少ないコードでシンプルにかける • 学習コストが低い • より安全にデータ更新ができる Recoil の良さとはなんですか?

    Flux と同様に、 • 単方向データフローで実装できる Redux と同様に、 • あるイベントに対して実行される処理を一箇所にまとめられる