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
320
Goで書いて学ぶ HTTP Server / Write and learn HTTP Server in Go
noyan_
0
11
React Server Componentsは誰のためのものか?
noyan_
0
390
Featured
See All Featured
How GitHub (no longer) Works
holman
310
140k
Automating Front-end Workflow
addyosmani
1366
200k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Side Projects
sachag
452
42k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
BBQ
matthewcrist
85
9.3k
The Invisible Side of Design
smashingmag
298
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
RailsConf 2023
tenderlove
29
900
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