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

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

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（代表的なもの） useState useEffect useCallback … … … ローカルな状態を定義（state相当）ライフサイクルイベントを実現
（DidMount, DidUpdate相当）イベントハンドラなどの関数を定義（必要に応じてメモ化して関数オブジェクトの再生成を抑制）

Stateless Functional Component Function Component

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

これから

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

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

Suspense

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

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

Thank you !!

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

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

ponday

More Decks by ponday

Other Decks in Programming

Featured

Transcript