Pro Yearly is on sale from $80 to $50! »

これまでのReact、これからのReact

52604f94a6d2172df2cad5ab45189940?s=47 ponday
January 25, 2019

 これまでのReact、これからのReact

React勉強会@福岡 vol.1(2019/01/25)の発表資料1つめです。

52604f94a6d2172df2cad5ab45189940?s=128

ponday

January 25, 2019
Tweet

Transcript

  1. これまでのReact、これからのReact React勉強会@福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)

  2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - まだ日曜フロントエンドエンジニア - 副業もやってます
  3. ※ ご注意

  4. 私のReactレベルはこんなものです

  5. これまでのReact

  6. React - Facebook製のライブラリ - かつてv0.14 → v15になってユーザーを驚かせた - テンプレート構文にJSXを採用 -

    必須ではないという主張もあるが、事実上必須 - 仮想DOMを実装している
  7. JSX - HTML in JSを実現する JavaScriptの拡張構文 - Stencilなどでも採用

  8. 仮想DOM - DOMの再描画を効率化するための仕組み - DOMの状態をメモリ上にキャッシュ - 仮想DOM - リアルDOMの差分を検出して更新 -

    画面全体を更新する場合に比べコストが低い - Vue.jsも仮想DOMを採用
  9. Redux - 状態管理用ライブラリ - Fluxアーキテクチャベース

  10. 関数コンポーネント - Stateless Functional Component (SFC) - v0.14から追加 - 以下のようなコンポーネントを関数として書ける

    - ローカルの状態を持たない - ライフサイクルイベントで処理をしない
  11. 関数コンポーネント

  12. React Native - モバイルアプリ向けのReact - クロスプラットフォーム(iOS/Android) - ラップしてより開発しやすくしたExpoというツールがある - Web向けのReact

    Native for Webも
  13. これからのReact

  14. React Hooks - Reactに搭載予定の新しいAPI - 関数コンポーネントでできることを広げる - ローカルな状態を持つ/操作する - ライフサイクルイベントを処理する

    - ほぼClass Component相当の機能が使える
  15. React Hooks(代表的なもの) useState useEffect useCallback … … … ローカルな状態を定義(state相当) ライフサイクルイベントを実現

    (DidMount, DidUpdate相当) イベントハンドラなどの関数を定義 (必要に応じてメモ化して関数オブジェクトの 再生成を抑制)
  16. Stateless Functional Component Function Component

  17. これまで 関数コンポーネント化 できない

  18. これから

  19. Concurrent Mode - 非同期レンダリングの仕組み - 並列的な描画が可能に(?) - メインスレッドをブロックせずにレンダリング - SuspenseとTime-slicingの2つの仕様を含む

  20. Suspense - レンダリングを中断できる - 非同期処理が解決されるまでレンダリングを中断 - データのfetchができるまで - 大きい画像のDLが完了するまで -

    etc...
  21. Suspense

  22. Time-slicing - 更新処理の優先順位を設定できる - レスポンスが求められるところは優先度を高く - 多少ラグがあっても良いものは優先度を低く - まだAPIが未公開(サンプルも省略)

  23. まとめ - Reactコンポーネントはクラスから関数へ - 描画処理において、チューニングの幅が広がりそう - 非同期的なレンダリング - 描画、更新の適切な順序付け -

    遅延読み込み - 2019年はかなり変化の年っぽい!
  24. Thank you !!