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
Which is the best option for linting: Pre-commit or CI?
locol23
1
300
Introduction to React
locol23
0
54
Introduction to Scrum
locol23
0
290
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
730
Other Decks in Technology
See All in Technology
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
180
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.1k
20251027_マルチエージェントとは
almondo_event
0
120
ソースを読むプロセスの例
sat
PRO
15
9.9k
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
330
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
100
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
120
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
380
What's new in OpenShift 4.20
redhatlivestreaming
0
160
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
1
350
事業開発におけるDify活用事例
kentarofujii
5
1.4k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Pragmatic Product Professional
lauravandoore
36
7k
Making Projects Easy
brettharned
120
6.4k
Become a Pro
speakerdeck
PRO
29
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
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/