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 Architectureとレスポンス性の向上 / React fibe...
Search
noyan
October 12, 2023
0
13
React Fiber Architectureとレスポンス性の向上 / React fiber architecture and responsiveness
noyan
October 12, 2023
Tweet
Share
More Decks by noyan
See All by noyan
利用者の生産性をどう上げるか 中規模モノレポの苦しみ
noyan_
0
350
Goで書いて学ぶ HTTP Server / Write and learn HTTP Server in Go
noyan_
0
19
React Server Componentsは誰のためのものか?
noyan_
0
400
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Ace a Technical Interview
jacobian
276
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing for humans not robots
tammielis
250
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
React Fiber Architectureͱ Ϩεϙϯεੑͷ্ JSConf.jp 2022.11.26 noyan
ຊͷςʔϚɿ ReactϨεϙϯεੑͷ্ʹ Ͳ͏Ξϓϩʔν͔ͨ͠
1. Introduction
ϨεϙϯεੑͱԿ͔ʁ • Ϩεϙϯεੑ(Responsiveness)Λɺ͜͜ͰҎԼͷΑ͏ʹ͏ɻ • ʮϢʔβʔʹΑΔΠϕϯτൃੜ͔ΒϑΟʔυόοΫ͕ؼͬͯ͘Δ· Ͱ͕Ͳͷ͘Β͍ૣ͍͔ʯ • ྫ: • <input>
ͷೖྗ͕ө͞ΕΔ·Ͱ1000msɹˠ ͍ • Πϕϯτͷछྨ͝ͱʹҟͳΔ
ɿJSͰͷ͠͞ JavaScriptͰϨεϙϯεੑͷߴ͍ίʔυΛ࣮ݱ͢Δͷ͕͍͠ʂ • ϩϯάλεΫɺϝΠϯεϨουʹΑΔೖྗͷεϜʔζͳॲཧɾ өΛ્͢Δ • վળ͢ΔͳΒɺ͍λεΫΛׂͯ͠தஅɾ࠶։͢ΔΈ͕ඞཁ
2. ReactͷԿ͕՝ͩͬͨͷ͔
Reactͷ৽͍ࠩ͠ݕॲཧ • ReactHooksͷϦϦʔεͱಉ࣌ظʹ෦࣮͕มߋ • ࠩݕॲཧΛ୲͢ΔύοέʔδͰɺϨϯμϦϯά͕ʮதஅɾ࠶։Մೳʯʹͳͬͨ • Not: ։ൃऀ͕ReactʹϨϯμϦϯάΛʮதஅͯ͠ɾ࠶։ͯ͠ʯͱࢦࣔΛૹΕΔ • ෦࣮ͷॲཧ͕தஅɾ࠶։ՄೳʹͳΔ
• ओͳϝϦοτʹɺϨεϙϯεੑͷ্͕͋Δ
Why, What, and How of React Fiber with Dan Abramov
and Andrew Clark “ओͳಈػɺReactͷͷ՝ͨͪΛղܾ͢Δ͜ͱͰ͢ɻͦ ͓ͯͦ͠Β͘Ұ൪େ͖ͳ՝ɺReact͕ݱࡏৗʹಉظతͰ͢ ͕ɺͦ͏Ͱ͋Δඞཁͳ͍͜ͱͰ͢ɻ” 8 ϝΠϯͷಈػ
۩ମతͳಉظతϨϯμϦϯάͷ • શͯͷλεΫΛొॱʹॲཧ͢ΔͨΊɺϨεϙϯεੑ͕ѱ͍ • Ϣʔβʔͷೖྗ(Typing)ͷөʹඦms͔͔Δ͜ͱ͕͋Δ • React͕ϝΠϯεϨουΛ༗͢ΔؒɺϒϥβΠϕϯτൃੜʹؾͮ ͔ͳ͍
2. Solution
ϨεϙϯεੑΛ্͛ΔͨΊʹඞཁͳઓུ • ϨϯμϦϯάʹ༏ઌॱҐΛ͚ͭͯཧ͢ΔΈ • ϒϥβΠϕϯτʹؾ͚ΔΑ͏ɺதஅɾ࠶։Ͱ͖ΔΈ
SchedulerͱReconciler React͜ͷ՝ղܾʹೋͭͷύοέʔδΛಋೖ͍ͯ͠Δ • Scheduler • ߋ৽ΩϡʔΛ༏ઌϕʔεͰཧɾ࣮ߦ • Fiber Reconciler •
தஅɾ࠶։ՄೳͳܗͰ”ԾDOM”ߏஙΛߦ͏
Scheduler • ঢ়ଶͷߋ৽ΩϡʔΛ༏ઌॱͰ࣮ߦ • 1. Πϕϯτ͝ͱʹకΛઃఆ • 2. క͕͍ۙॱʹΠϕϯτΛॲཧ •
༏ઌΩϡʔͰऔΓग़͠
Fiber Reconciler • ࡞ۀ୯ҐΛReactElement୯Ґʹׂ • ఆظతʹதஅ͠ɺϒϥβΠϕϯτ͕ͳ͍͔֬ೝ͢Δ • ۩ମతʹ4ms͝ͱʹܭࢉΛதஅ͍ͯ͠Δ
“Faster input events with Facebook’s fi rst browser API contributio”,
Nate Schloss, Andrew Comminos, 2022.4.22 • ϨεϙϯεੑͷͨΊʹύ ϑΥʔϚϯεΛগ٘͠ਜ਼ ʹ͍ͯ͠Δ • ࣮ղʹͳͬͨ • Ϣʔβʔϥϯυͷݶք ͰɺཧతͳղܾࡦͰ ͳ͍ ຊʹ͜ΕͰ͍͍ͷ͔ʁ
4. ཧతͳະདྷ
Ϩεϙϯεੑվળͷ͜Ε͔Β • scheduling.isInputPending, yield ͱ͍͏API͕ChromeͰ࣮͕ਐΜͰ͍Δ • isInputPending: ϝΠϯεϨουΛ໌͚ͣ͞ʹೖྗͪΛఆ • sheduling.yield:
awaitจͰܧଓ͕͔͚Δ • ͜ΕReactͷSchedulerͷସʹͳΔ͚ͩͰͳ͘ɺJSͰϩϯάλεΫதʹϨε ϙϯεੑ͕ࣦΘΕΔҰൠͷղܾࡦʹͳΔ • https://github.com/WICG/scheduling-apis/blob/main/explainers/yield-and- continuation.md#scheduleryield