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
9
React Fiber Architectureとレスポンス性の向上 / React fiber architecture and responsiveness
noyan
October 12, 2023
Tweet
Share
More Decks by noyan
See All by noyan
利用者の生産性をどう上げるか 中規模モノレポの苦しみ
noyan_
0
310
Goで書いて学ぶ HTTP Server / Write and learn HTTP Server in Go
noyan_
0
11
React Server Componentsは誰のためのものか?
noyan_
0
380
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Statistics for Hackers
jakevdp
796
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Six Lessons from altMBA
skipperchong
26
3.5k
Adopting Sorbet at Scale
ufuk
73
9k
How GitHub (no longer) Works
holman
311
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
330
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Unsuck your backbone
ammeep
668
57k
For a Future-Friendly Web
brad_frost
175
9.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