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
15
React Fiber Architectureとレスポンス性の向上 / React fiber architecture and responsiveness
noyan
October 12, 2023
Tweet
Share
More Decks by noyan
See All by noyan
利用者の生産性をどう上げるか 中規模モノレポの苦しみ
noyan_
0
370
Goで書いて学ぶ HTTP Server / Write and learn HTTP Server in Go
noyan_
0
24
React Server Componentsは誰のためのものか?
noyan_
0
430
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
Docker and Python
trallard
44
3.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Thoughts on Productivity
jonyablonski
69
4.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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