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 Fiberまとめ
Search
Yoshitaka Terazawa
April 13, 2018
Technology
0
250
ざっくりReact Fiberまとめ
Yoshitaka Terazawa
April 13, 2018
Tweet
Share
More Decks by Yoshitaka Terazawa
See All by Yoshitaka Terazawa
Introduction to React
locol23
0
53
Introduction to Scrum
locol23
0
280
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
730
Other Decks in Technology
See All in Technology
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
160
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
210
UDDのススメ - 拡張版 -
maguroalternative
1
610
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
130
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
170
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
2
330
Backlog AI アシスタントが切り開く未来
vvatanabe
1
160
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
160
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
3
1.5k
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
Lambda management with ecspresso and Terraform
ijin
2
170
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.4k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Building Adaptive Systems
keathley
43
2.7k
Statistics for Hackers
jakevdp
799
220k
How STYLIGHT went responsive
nonsquared
100
5.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
A better future with KSS
kneath
239
17k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Gamification - CAS2011
davidbonilla
81
5.4k
Unsuck your backbone
ammeep
671
58k
Transcript
ざっくりReact Fiberまとめ
Fiberとは • Stackに変わる新しいReconciliation(リコンシリエーション)用の構造 • React v17よりデフォルトでFiberを使用した非同期のRenderingに変更 →Fiberを使用した非同期Renderingになることで、 ユーザのアクション(Inputへの入力など)を待たせないようになる
Reconsiliationとは • Virtual DOMの差分取得アルゴリズム • 差分取得結果をもとにHost(DOM等)に反映 ※HostとはブラウザであればDOM、 ネイティブであればReactNativeのビュー
StackとFiberの違い Stack(既存) Rootから順番に全て の子Componentを処 理後、renderingする 為、処理中にユーザ からアクセスがあっ た場合に対応できな い Fiber(v17〜)
class App extends React.Component { render(){ return( <Head /> <div>test</div> ) } } : Fiber Fiberの非同期 RenderingではFiber 単位で処理が実行さ れ、優先度によって Idle中の処理に回す などFlexibleに行わ れる為、ユーザを待 たせない
まとめ • renderingする裏側の構造の変更の為、実際に使用する側としては 意識する必要はあまりない • 非同期Renderingにより、ユーザを待たせないようになる
Appendix
Links • https://github.com/acdlite/react-fiber-architecture • http://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/ • https://qiita.com/seya/items/a655adb340af3b6690b5 • https://postd.cc/react-fiber-architecture/