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

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

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