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
290
これまでの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
3k
Web Componentsの今
honda
1
400
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
650
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Immutable ActiveRecord
megane42
0
130
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Done Done
chrislema
182
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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 !!