React Fiber Architectureͱ Ϩεϙϯεੑͷ޲্ JSConf.jp 2022.11.26 noyan

ຊ೔ͷςʔϚɿ React͸Ϩεϙϯεੑͷ޲্ʹ Ͳ͏Ξϓϩʔν͔ͨ͠

1. Introduction

Ϩεϙϯεੑͱ͸Կ͔ʁ • Ϩεϙϯεੑ(Responsiveness)Λɺ͜͜Ͱ͸ҎԼͷΑ͏ʹ࢖͏ɻ • ʮϢʔβʔʹΑΔΠϕϯτൃੜ͔ΒϑΟʔυόοΫ͕ؼͬͯ͘Δ· Ͱ͕Ͳͷ͘Β͍ૣ͍͔ʯ • ྫ: • ΁ͷೖྗ͕൓ө͞ΕΔ·Ͱ1000msɹˠ ஗͍ • Πϕϯτͷछྨ͝ͱʹҟͳΔ

໰୊఺ɿJSͰͷ೉͠͞ JavaScriptͰ͸Ϩεϙϯεੑͷߴ͍ίʔυΛ࣮ݱ͢Δͷ͕೉͍͠ʂ • ϩϯάλεΫ͸ɺϝΠϯεϨουʹΑΔೖྗͷεϜʔζͳॲཧɾ൓ өΛ્֐͢Δ • վળ͢ΔͳΒɺ௕͍λεΫΛ෼ׂͯ͠தஅɾ࠶։͢Δ࢓૊Έ͕ඞཁ

2. ReactͷԿ͕՝୊ͩͬͨͷ͔

Reactͷ৽͍ࠩ͠෼ݕ஌ॲཧ • React͸HooksͷϦϦʔεͱಉ࣌ظʹ಺෦࣮૷͕มߋ • ࠩ෼ݕ஌ॲཧΛ୲౰͢ΔύοέʔδͰɺϨϯμϦϯά͕ʮதஅɾ࠶։Մೳʯʹͳͬͨ • 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