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
46
Introduction to Scrum
locol23
0
280
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
710
Other Decks in Technology
See All in Technology
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
330
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
150
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
200
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
Operating Operator
shhnjk
1
500
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
360
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.7k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Side Projects
sachag
455
42k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
The World Runs on Bad Software
bkeepers
PRO
69
11k
Gamification - CAS2011
davidbonilla
81
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Become a Pro
speakerdeck
PRO
28
5.4k
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/