React勉強会@福岡 vol.1(2019/01/25)の発表資料1つめです。
これまでのReact、これからのReactReact勉強会@福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)
View Slide
Profile- ponday (Honda, Yusuke)- 株式会社ベガコーポレーション エンジニア- Like : TypeScript / Elixir / Python etc…- まだ日曜フロントエンドエンジニア- 副業もやってます
※ ご注意
私のReactレベルはこんなものです
これまでのReact
React- Facebook製のライブラリ- かつてv0.14 → v15になってユーザーを驚かせた- テンプレート構文にJSXを採用- 必須ではないという主張もあるが、事実上必須- 仮想DOMを実装している
JSX- HTML in JSを実現するJavaScriptの拡張構文- Stencilなどでも採用
仮想DOM- DOMの再描画を効率化するための仕組み- DOMの状態をメモリ上にキャッシュ- 仮想DOM - リアルDOMの差分を検出して更新- 画面全体を更新する場合に比べコストが低い- Vue.jsも仮想DOMを採用
Redux- 状態管理用ライブラリ- Fluxアーキテクチャベース
関数コンポーネント- Stateless Functional Component (SFC)- v0.14から追加- 以下のようなコンポーネントを関数として書ける- ローカルの状態を持たない- ライフサイクルイベントで処理をしない
関数コンポーネント
React Native- モバイルアプリ向けのReact- クロスプラットフォーム(iOS/Android)- ラップしてより開発しやすくしたExpoというツールがある- Web向けのReact Native for Webも
これからのReact
React Hooks- Reactに搭載予定の新しいAPI- 関数コンポーネントでできることを広げる- ローカルな状態を持つ/操作する- ライフサイクルイベントを処理する- ほぼClass Component相当の機能が使える
React Hooks(代表的なもの)useStateuseEffectuseCallback………ローカルな状態を定義(state相当)ライフサイクルイベントを実現(DidMount, DidUpdate相当)イベントハンドラなどの関数を定義(必要に応じてメモ化して関数オブジェクトの再生成を抑制)
Stateless Functional ComponentFunction Component
これまで関数コンポーネント化できない
これから
Concurrent Mode- 非同期レンダリングの仕組み- 並列的な描画が可能に(?)- メインスレッドをブロックせずにレンダリング- SuspenseとTime-slicingの2つの仕様を含む
Suspense- レンダリングを中断できる- 非同期処理が解決されるまでレンダリングを中断- データのfetchができるまで- 大きい画像のDLが完了するまで- etc...
Suspense
Time-slicing- 更新処理の優先順位を設定できる- レスポンスが求められるところは優先度を高く- 多少ラグがあっても良いものは優先度を低く- まだAPIが未公開(サンプルも省略)
まとめ- Reactコンポーネントはクラスから関数へ- 描画処理において、チューニングの幅が広がりそう- 非同期的なレンダリング- 描画、更新の適切な順序付け- 遅延読み込み- 2019年はかなり変化の年っぽい!
Thank you !!