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
300
これまでの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.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
410
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
670
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
680
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
790
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
100
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
700
Sharing features among Android applications: experience feedback
jbvincey
0
110
AIコーディングの理想と現実
tomohisa
22
29k
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
Making TCPSocket.new "Happy"!
coe401_
1
1.3k
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
エンジニア未経験が最短で戦力になるためのTips
gokana
0
280
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
150
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
140
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
110
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Navigating Team Friction
lara
184
15k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Practical Orchestrator
shlominoach
186
11k
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 !!