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

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 !!