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

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

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