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
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
ゼロからはじめる採用広報
yutadayo
3
920
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Visualization
eitanlees
146
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A designer walks into a library…
pauljervisheath
207
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building an army of robots
kneath
306
45k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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/