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
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
670
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
780
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
310
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
120
JavaOne 2025: Advancing Java Profiling
jbachorik
1
310
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
160
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.4k
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
350
SQL Server ベクトル検索
odashinsuke
0
110
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GraphQLとの向き合い方2022年版
quramy
45
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Bash Introduction
62gerente
611
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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 !!