ReactとUXの話 〜 startTransition を添えて 〜

Netadashi Meetup #12 の登壇資料です。

Transcript

1. 3FBDUͱ69ͷ࿩ ʙ
   TUBSU5SBOTJUJPO
   Λఴ͑ͯ
   ʙ উా
   ༤ᏻ
   c
   
   /FUBEBTIJ
   .FFUVQ
   
2. ɾ5BHCBOHFST
   *OD
   ɾओʹϑϩϯτΤϯυͷ։ൃʢ໿೥͘Β͍ʣ
   ɾొஃ͸ॳΊͯ উా
   ༤ᏻ
   
   !ZVVLJLBUTVUB ࣗݾ঺հ
3. ͸͡Ίʹ  ςʔϚ ɾ3FBDU
   ͷฒྻϨϯμϦϯά͕΋ͨΒ͢69ͷਐԽ ɾ6*
   ߋ৽ͷ෣୆ཪΛ೷͍ͯΈΑ͏
4.  69ʢϢʔβʔମݧʣΛୈҰʹ IUUQTMFHBDZSFBDUKTPSHCMPHCVJMEJOHHSFBUVTFSFYQFSJFODFTXJUIDPODVSSFOUNPEFBOETVTQFOTFIUNMQVUUJOHVTFS FYQFSJFODF fi STU %FWFMPQFS
   &YQFSJFODF
   ˠ
   6TFS
   &YQFSJFODF
5. 4ZODISPOPVT
   3FOEFSJOH  Event Event Event User Interaction Main thread ʢ#MPDLFEʣ ʢ#MPDLFEʣ
6. $PODVSSFOU
   3FOEFSJOH  User Interaction Event Event ʢ/PO
   #MPDLJOHʣʢ/PO
   #MPDLJOHʣ
7. $PODVSSFOU
   3FOEFSJOH  ɾ3FBDU
   
   ͷ৽͍͠ϨϯμϦϯάػߏ
   ɾϨϯμϦϯά
   ϓϩηεΛதஅՄೳͳ࡞ۀ୯Ґʹ෼ׂ
   ɹɹˠ
   தஅɾ࠶ձɾഁغ͕Մೳʹ
   ɹɹˠ
   ϨϯμϦϯάϓϩηεʹ༏ઌ౓ͷ֓೦ ˞
   ϨϯμϦϯά
   ˠ
   Ծ૝%0.πϦʔͷߏங
8. ෮श
   ʙ
   TUBSU5SBOTJUJPO
   ͱ͸
   ʙ 
   
   TUBSU5SBOTJUJPO
   ؔ਺Λ࢖༻ͯ͠ঢ়ଶͷߋ৽Λ
   ʮ௿༏ઌ౓ͷεςʔτߋ৽ʯͱͯ͠3FBDUʹ఻͑Δ ͜ͷߋ৽͸ۓٸͰ͸ͳ͍ͨΊɺॲཧ͢΂͖ۓٸͷλεΫ͕͋Δ৔߹͸தஅͰ͖Δ
9. TUBSU5SBOTJUJPO
   ͷྫ  ೖྗϑΥʔϜ user input Rendering ༏ઌ౓ߴ ༏ઌ౓௿ Ϣʔβͷೖྗ஋ʹର͢ΔมԽ
   ˠ
   ༏ઌ౓ߴ ϢʔβͷೖྗʹΑΔϦετͷϨϯμʔ
   ˠ
   ༏ઌ౓௿
10. ΋͏Ұͭͷੈք  ʮCSBODIϞσϧʯ΍ʮผͷੈքʯͱ͍͏දݱ
    
    ˠ
    VTF5SBOTJUJPO͕ͲͷΑ͏ʹػೳ͢Δ͔Λཧղ͢ΔͨΊͷൺᄻදݱ ެࣜυΩϡϝϯτΑΓ IUUQTSFBDUKTPSHEPDTDPODVSSFOUNPEFQBUUFSOTIUNM
11. CSBODI
    ϞσϧͰߟ͑ͯΈΔ  ௿༏ઌ౓ͷ
    3FOEFS
    ˠ
    ߴ༏ઌ౓ͷϨϯμϦϯά͕ऴྃͨ͠ޙʹͷΈ࣮ߦ։࢝
    ˠ
    ߴ༏ઌ౓ͷλεΫͷߋ৽ʹΑͬͯதஅ͞ΕΔ Main thread transition thread ʢ௿༏ઌ౓ͷRenderʣ 1 2 3 4 5 %0.൓ө %0.൓ө %0.൓ө ʢϑΥʔϜೖྗ
12. CSBODI
    ϞσϧͰߟ͑ͯΈΔ  ߴ༏ઌ౓ͷλεΫͷߋ৽ʹΑͬͯதஅ͞ΕΔ
    ˠ
    ߴ༏ઌ౓ͷλεΫᶅ͕ൃੜ
    ˠ
    ௿༏ઌ౓ͷλεΫᶄͷϨϯμϦϯά͕தஅ Main thread transition thread ʢ௿༏ઌ౓ͷRenderʣ 1 2 3 4 5 %0.൓ө %0.൓ө %0.൓ө ʢϑΥʔϜೖྗ
13. ·ͱΊ  ɾ3FBDU
    ͓΋͠Ζ͍ʂ
    ɹ͜ͷ࢓૊ΈΛ׆༻ͯ͠ɺϓϩμΫτΛΑΓྑ͍΋ͷʹ͍ͨ͠Ͷ ɾৄࡉͳ࢓૊ΈΛ΋ͬͱ஌Γͨ͘ͳͬͨ
    ɹ'JCFS
    3FDPODJMFS
    
    3FDPODJMJBUJPO
    ʜ
14. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ