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
320
これまでの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.3k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
720
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
840
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
770
What's new in Spring Modulith?
olivergierke
1
160
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
1
310
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
contribution to astral-sh/uv
shunsock
0
440
Software Architecture
hschwentner
6
2.3k
Google Opalで使える37のライブラリ
mickey_kubo
3
130
CSC509 Lecture 08
javiergs
PRO
0
230
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
660
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Bash Introduction
62gerente
615
210k
Statistics for Hackers
jakevdp
799
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1032
470k
How STYLIGHT went responsive
nonsquared
100
5.8k
Embracing the Ebb and Flow
colly
88
4.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Automating Front-end Workflow
addyosmani
1371
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.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 !!