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
290
Introduction to React
locol23
0
54
Introduction to Scrum
locol23
0
280
Reactでリプレースして爆速になったのでちょっと仕組み公開
locol23
0
730
Other Decks in Technology
See All in Technology
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
「Verify with Wallet API」を アプリに導入するために
hinakko
1
260
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
100
実装で解き明かす並行処理の歴史
zozotech
PRO
1
640
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
360
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
190
Git in Team
kawaguti
PRO
2
320
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
110
Azure Well-Architected Framework入門
tomokusaba
1
350
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
470
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
230
Featured
See All Featured
KATA
mclloyd
32
15k
We Have a Design System, Now What?
morganepeng
53
7.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Facilitating Awesome Meetings
lara
56
6.6k
Become a Pro
speakerdeck
PRO
29
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Site-Speed That Sticks
csswizardry
11
890
Speed Design
sergeychernyshev
32
1.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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/