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
36
Introduction to Scrum
locol23
0
250
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
670
Other Decks in Technology
See All in Technology
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
1.5k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
1
1.6k
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
Windows の新しい管理者保護モード
murachiakira
0
190
OPENLOGI Company Profile for engineer
hr01
1
20k
分解して理解する Aspire
nenonaninu
2
700
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
160
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
130
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
460
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
200
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building Applications with DynamoDB
mza
93
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
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/