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
49
Introduction to Scrum
locol23
0
280
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
710
Other Decks in Technology
See All in Technology
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
三視点LLMによる複数観点レビュー
mhlyc
0
230
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.7k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.8k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Designing for humans not robots
tammielis
253
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Music & Morning Musume
bryan
46
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
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/