$30 off During Our Annual Pro Sale. View Details »

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

ponday
January 25, 2019

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

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

ponday

January 25, 2019
Tweet

More Decks by ponday

Other Decks in Programming

Transcript

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

    View Slide

  2. Profile
    - ponday (Honda, Yusuke)
    - 株式会社ベガコーポレーション エンジニア
    - Like : TypeScript / Elixir / Python etc…
    - まだ日曜フロントエンドエンジニア
    - 副業もやってます

    View Slide

  3. ※ ご注意

    View Slide

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

    View Slide

  5. これまでのReact

    View Slide

  6. React
    - Facebook製のライブラリ
    - かつてv0.14 → v15になってユーザーを驚かせた
    - テンプレート構文にJSXを採用
    - 必須ではないという主張もあるが、事実上必須
    - 仮想DOMを実装している

    View Slide

  7. JSX
    - HTML in JSを実現する
    JavaScriptの拡張構文
    - Stencilなどでも採用

    View Slide

  8. 仮想DOM
    - DOMの再描画を効率化するための仕組み
    - DOMの状態をメモリ上にキャッシュ
    - 仮想DOM - リアルDOMの差分を検出して更新
    - 画面全体を更新する場合に比べコストが低い
    - Vue.jsも仮想DOMを採用

    View Slide

  9. Redux
    - 状態管理用ライブラリ
    - Fluxアーキテクチャベース

    View Slide

  10. 関数コンポーネント
    - Stateless Functional Component (SFC)
    - v0.14から追加
    - 以下のようなコンポーネントを関数として書ける
    - ローカルの状態を持たない
    - ライフサイクルイベントで処理をしない

    View Slide

  11. 関数コンポーネント

    View Slide

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

    View Slide

  13. これからのReact

    View Slide

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

    View Slide

  15. React Hooks(代表的なもの)
    useState
    useEffect
    useCallback



    ローカルな状態を定義(state相当)
    ライフサイクルイベントを実現
    (DidMount, DidUpdate相当)
    イベントハンドラなどの関数を定義
    (必要に応じてメモ化して関数オブジェクトの
    再生成を抑制)

    View Slide

  16. Stateless Functional Component
    Function Component

    View Slide

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

    View Slide

  18. これから

    View Slide

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

    View Slide

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

    View Slide

  21. Suspense

    View Slide

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

    View Slide

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

    View Slide

  24. Thank you !!

    View Slide