React Fiber Architectureとレスポンス性の向上 / React fiber architecture and responsiveness

Transcript

1. React Fiber Architectureͱ Ϩεϙϯεੑͷ޲্ JSConf.jp 2022.11.26 noyan
2. ຊ೔ͷςʔϚɿ React͸Ϩεϙϯεੑͷ޲্ʹ Ͳ͏Ξϓϩʔν͔ͨ͠
3. 1. Introduction
4. Ϩεϙϯεੑͱ͸Կ͔ʁ • Ϩεϙϯεੑ(Responsiveness)Λɺ͜͜Ͱ͸ҎԼͷΑ͏ʹ࢖͏ɻ • ʮϢʔβʔʹΑΔΠϕϯτൃੜ͔ΒϑΟʔυόοΫ͕ؼͬͯ͘Δ· Ͱ͕Ͳͷ͘Β͍ૣ͍͔ʯ • ྫ: • <input> ΁ͷೖྗ͕൓ө͞ΕΔ·Ͱ1000msɹˠ ஗͍ • Πϕϯτͷछྨ͝ͱʹҟͳΔ
5. ໰୊఺ɿJSͰͷ೉͠͞ JavaScriptͰ͸Ϩεϙϯεੑͷߴ͍ίʔυΛ࣮ݱ͢Δͷ͕೉͍͠ʂ • ϩϯάλεΫ͸ɺϝΠϯεϨουʹΑΔೖྗͷεϜʔζͳॲཧɾ൓ өΛ્֐͢Δ • վળ͢ΔͳΒɺ௕͍λεΫΛ෼ׂͯ͠தஅɾ࠶։͢Δ࢓૊Έ͕ඞཁ
6. 2. ReactͷԿ͕՝୊ͩͬͨͷ͔
7. Reactͷ৽͍ࠩ͠෼ݕ஌ॲཧ • React͸HooksͷϦϦʔεͱಉ࣌ظʹ಺෦࣮૷͕มߋ • ࠩ෼ݕ஌ॲཧΛ୲౰͢ΔύοέʔδͰɺϨϯμϦϯά͕ʮதஅɾ࠶։Մೳʯʹͳͬͨ • Not: ։ൃऀ͕ReactʹϨϯμϦϯάΛʮதஅͯ͠ɾ࠶։ͯ͠ʯͱࢦࣔΛૹΕΔ • ಺෦࣮૷ͷॲཧ͕தஅɾ࠶։ՄೳʹͳΔ • ओͳϝϦοτʹɺϨεϙϯεੑͷ޲্͕͋Δ
8. Why, What, and How of React Fiber with Dan Abramov and Andrew Clark “ओͳಈػ͸ɺReactͷ௕೥ͷ՝୊ͨͪΛղܾ͢Δ͜ͱͰ͢ɻͦ ͓ͯͦ͠Β͘Ұ൪େ͖ͳ՝୊͸ɺReact͕ݱࡏৗʹಉظతͰ͢ ͕ɺͦ͏Ͱ͋Δඞཁ͸ͳ͍͜ͱͰ͢ɻ” 8 ϝΠϯͷಈػ
9. ۩ମతͳಉظతϨϯμϦϯάͷ໰୊఺ • શͯͷλεΫΛొ࿥ॱʹॲཧ͢ΔͨΊɺϨεϙϯεੑ͕ѱ͍ • Ϣʔβʔͷೖྗ(Typing)ͷ൓өʹ਺ඦms͔͔Δ͜ͱ͕͋Δ • React͕ϝΠϯεϨουΛ઎༗͢Δؒɺϒϥ΢βΠϕϯτൃੜʹؾͮ ͔ͳ͍
10. 2. Solution
11. ϨεϙϯεੑΛ্͛ΔͨΊʹඞཁͳઓུ • ϨϯμϦϯάʹ༏ઌॱҐΛ͚ͭͯ؅ཧ͢Δ࢓૊Έ • ϒϥ΢βΠϕϯτʹؾ෇͚ΔΑ͏ɺதஅɾ࠶։Ͱ͖Δ࢓૊Έ
12. SchedulerͱReconciler React͸͜ͷ՝୊ղܾʹೋͭͷύοέʔδΛಋೖ͍ͯ͠Δ • Scheduler • ߋ৽ΩϡʔΛ༏ઌ౓ϕʔεͰ؅ཧɾ࣮ߦ • Fiber Reconciler • தஅɾ࠶։ՄೳͳܗͰ”Ծ૝DOM”ߏஙΛߦ͏
13. Scheduler • ঢ়ଶͷߋ৽ΩϡʔΛ༏ઌ౓ॱͰ࣮ߦ • 1. Πϕϯτ͝ͱʹక੾Λઃఆ • 2. క੾͕͍ۙॱʹΠϕϯτΛॲཧ • ༏ઌ౓ΩϡʔͰऔΓग़͠
14. Fiber Reconciler • ࡞ۀ୯ҐΛReactElement୯Ґʹ෼ׂ • ఆظతʹதஅ͠ɺϒϥ΢βΠϕϯτ͕ͳ͍͔֬ೝ͢Δ • ۩ମతʹ͸4ms͝ͱʹܭࢉΛதஅ͍ͯ͠Δ
15. “Faster input events with Facebook’s fi rst browser API contributio”, Nate Schloss, Andrew Comminos, 2022.4.22 • ϨεϙϯεੑͷͨΊʹύ ϑΥʔϚϯεΛগ٘͠ਜ਼ ʹ͍ͯ͠Δ • ࣮૷͸೉ղʹͳͬͨ • Ϣʔβʔϥϯυͷݶք Ͱɺཧ૝తͳղܾࡦͰ͸ ͳ͍ ຊ౰ʹ͜ΕͰ͍͍ͷ͔ʁ
16. 4. ཧ૝తͳະདྷ
17. Ϩεϙϯεੑվળͷ͜Ε͔Β • 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