Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これまでのReact、これからのReact
Search
ponday
January 25, 2019
Programming
0
280
これまでのReact、これからのReact
React勉強会@福岡 vol.1(2019/01/25)の発表資料1つめです。
ponday
January 25, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
620
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
730
Web Componentsの動向とPolymer
honda
4
2.3k
Other Decks in Programming
See All in Programming
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Vue.js学習の振り返り
hiro_xre
2
130
CSC509 Lecture 08
javiergs
PRO
0
110
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Featured
See All Featured
Optimizing for Happiness
mojombo
376
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Ruby is Unlike a Banana
tanoku
96
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
A designer walks into a library…
pauljervisheath
202
24k
Navigating Team Friction
lara
183
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Side Projects
sachag
452
42k
GraphQLとの向き合い方2022年版
quramy
43
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Transcript
これまでの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 !!