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
36
Introduction to Scrum
locol23
0
250
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
670
Other Decks in Technology
See All in Technology
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
670
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
65k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
150
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
1
1.3k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
510
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.6k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
210
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.6k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A Philosophy of Restraint
colly
203
16k
Building Your Own Lightsaber
phodgson
104
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Adaptive Systems
keathley
40
2.4k
Music & Morning Musume
bryan
46
6.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Gamification - CAS2011
davidbonilla
80
5.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
KATA
mclloyd
29
14k
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/