Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ざっくりReact Fiberまとめ
Search
locol
April 13, 2018
Technology
0
260
ざっくりReact Fiberまとめ
locol
April 13, 2018
Tweet
Share
More Decks by locol
See All by locol
Which is the best option for linting: Pre-commit or CI?
locol23
1
320
Introduction to React
locol23
0
58
Introduction to Scrum
locol23
0
300
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
730
Other Decks in Technology
See All in Technology
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
bitkey
PRO
1
310
MAP-7thplaceSolution
yukichi0403
2
240
HIG学習用スライド
yuukiw00w
0
110
.NET 10 のパフォーマンス改善
nenonaninu
2
4.6k
プラットフォームエンジニアリングとは何であり、なぜプラットフォームエンジニアリングなのか
doublemarket
1
540
How native lazy objects will change Doctrine and Symfony forever
beberlei
1
370
インフラ室事例集
mixi_engineers
PRO
2
220
Introduction to Bill One Development Engineer
sansan33
PRO
0
320
MySQL AIとMySQL Studioを使ってみよう
ikomachi226
0
130
Flutter Thread Merge - Flutter Tokyo #11
itsmedreamwalker
1
140
原理から解き明かす AIと人間の成長 - Progate BAR
teba_eleven
2
290
AI駆動開発によるDDDの実践
dip_tech
PRO
0
270
Featured
See All Featured
Speed Design
sergeychernyshev
33
1.4k
Code Review Best Practice
trishagee
73
19k
Being A Developer After 40
akosma
91
590k
Building Applications with DynamoDB
mza
96
6.8k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Embracing the Ebb and Flow
colly
88
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Done Done
chrislema
186
16k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
370
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
Mobile First: as difficult as doing things right
swwweet
225
10k
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/