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
390
Goで書いて学ぶ HTTP Server / Write and learn HTTP Server in Go
noyan_
0
25
React Server Componentsは誰のためのものか?
noyan_
0
430
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
RailsConf 2023
tenderlove
30
1.2k
KATA
mclloyd
32
15k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Writing Fast Ruby
sferik
629
62k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Why Our Code Smells
bkeepers
PRO
340
57k
A Tale of Four Properties
chriscoyier
161
23k
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