うわっ…リスト表示重すぎ… Reactのパフォーマンス改善の処方箋/react-list-performance-improvement

Transcript

1. ͏ΘͬʜϦετදࣔॏ͗͢ʜ
   
   3FBDUͷύϑΥʔϚϯεվળͷॲํᝦ

2. 2,ݱঢ়෼ੳͱ໰୊఺ ࣗݾ঺հ ɾ!QFOUMB
   ౉ล
   Ұً
   ɾ'"45"-&35νʔϜ
   ɾϑϩϯτ݉όοΫΤϯυΤϯδχΞ
   ɾ"QFY
   
   3VTU
   
   ಡॻ

3. 2,ݱঢ়෼ੳͱ໰୊఺ 5XFFU%FDL࡞ͬͯʂ
   ͬͯݴΘΕͨΒɺͲ͏͠·͢ʁ ૣ଎

4. 2,ݱঢ়෼ੳͱ໰୊఺ ͋Δఔ౓׬੒ͨ͠ͱͯ͠ ɾͱΓ͋͑ͣ3FBDUͰ
   ɾ"1*ͱͷܨ͗ࠐΈ΋ͳΜͱ͔׬ྃʂ
   ɾσʔλ͕දࣔͰ͖ΔΑ͏ʹͳΓ·ͨ͠

5. 2,ݱঢ়෼ੳͱ໰୊఺ ͨͩ͠ɻɻɻ͜ͷΑ͏ͳཁ͕݅དྷͯ͠·͍·ͨ͠ ɾ৽͍͠λΠϜϥΠϯ͕࣍ʑͱདྷΔ͔Βදࣔͯ͠Ͷʂ
   ɾԼʹεΫϩʔϧ͢ΔͱաڈͷλΠϜϥΠϯΛḪΕΔΑ͏ʹͶ
   ɾը૾ɾಈըΛද͍ࣔͨ͠Ͷ

6. 2,ݱঢ়෼ੳͱ໰୊఺ ॏ͘ͳΔɻ ʷ
   

7. 2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸ʮ3FBDUʯͷʮϦετදࣔʯͷ࿩Λ͠·͢

8. 2,ݱঢ়෼ੳͱ໰୊఺ Ͳ͏͢Δ΂͖͔ɿ3FBDUͷυΩϡϝϯτ ʰΞϓϦέʔγϣϯ͕௕͍σʔλͷϦετʢ਺ඦʙ਺ઍߦʣΛϨϯμʔ͢Δ৔߹͸ɺ
   ʮ΢Οϯυ΢Πϯάʯͱͯ͠஌ΒΕΔςΫχοΫΛ࢖͏͜ͱΛ͓͢͢Ί͠·͢ɻ͜ͷςΫχο ΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ
   %0.
   ϊʔυͷ਺͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ʰ
   SFBDUXJOEPX
   ͱ
   SFBDUWJSUVBMJ[FE
   ͸ਓؾ͕͋Δ΢Οϯυ΢ΠϯάॲཧͷϥΠϒϥϦͰ ͢ɻ͜ΕΒ͸ϦετɺάϦουɺ͓ΑͼදܗࣜͷσʔλΛදࣔ͢ΔͨΊͷɺ͍͔ͭ͘ͷ࠶ར༻ ՄೳίϯϙʔωϯτΛఏڙ͍ͯ͠·͢ɻΞϓϦέʔγϣϯͷಛఆͷϢʔεέʔεʹ߹Θͤͨ௥ ՃతͳॲཧΛ͢Δ৔߹͸ɺ5XJUUFS
   ͕ߦͳ͍ͬͯΔΑ͏ʹɺಠࣗͷ΢Οϯυ΢Πϯάॲཧͷίϯ

   ϙʔωϯτΛ࡞੒͢Δ͜ͱ΋Ͱ͖·͢ɻʱ

9. 2,ݱঢ়෼ੳͱ໰୊఺ ΢Οϯυ΢Πϯά XJOEPXJOH ͱ͸ ʰ͜ͷςΫχοΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ
   ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ
   %0.
   ϊʔυͷ਺ ͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ
   ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ݪҼ͸Ϣʔβʔ͕Έ͍ͯͳ͍ൣғ·Ͱ
   ඳըͯ͠͠·͍ͬͯΔ͜ͱ

10. 2,ݱঢ়෼ੳͱ໰୊఺ ਤʹ͢Δͱ͜͏ ɾϦετͷେ෦෼͸Կ΋ඳը͠ͳ͍
    ɾσΟεϓϨΠʹө͍ͬͯΔ෦෼ͷΈ ඳը͢Δ
    ɾεΫϩʔϧʹ߹ΘͤͯඳըൣғΛ
    ௐઅ͢Δ

11. 2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ɾશମͷߴ͞
    
    ΞΠςϜͭͷαΠζ
    ʷ
    ݸ਺
    ɾඳը࢝͠ΊΔߴ͞
    
    ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

12. 2,ݱঢ়෼ੳͱ໰୊఺ SFBDUXJOEPXΛ࢖͑͹ղܾʁ ϝϞ
    ɾSFBDUXJOEPX͸SFBDUWJSUVBMJ[FEͱಉ͡ਓ͕ॻ͍ͨϥΠϒϥϦ
    ɾαΠζΛݮΒ͠ɺύϑΥʔϚϯεΛ޲্ͤͨ͞ޙܧʹ౰ͨΓ·͢
    ɾSFBDUXJOEPX
    L#
    SFBDUWJSUVBMJ[FE
    .#

13. 2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸؆ૉͳྫͰ࣮૷ΛݟͯΈ·͢

14. 2,ݱঢ়෼ੳͱ໰୊఺ 6*ΛݟͯΈΔͱ ؆ૉ

15. 2,ݱঢ়෼ੳͱ໰୊఺ ͜Ε͕

16. 2,ݱঢ়෼ੳͱ໰୊఺ ͜͏ͳΓ·ͨ͠ ɾXJEUI
    IFJHIU
    
    Ϧετશମͷ௕͞ɺߴ͞
    ɾJUFN$PVOU
    
    
    
    ΞΠςϜશମͷݸ਺
    ɾJUFN4J[F
    
    
    
    ΞΠςϜͭͭͷߴ͞

17. 2,ݱঢ়෼ੳͱ໰୊఺ ॻ͖ํ͕݁ߏҧ͏ ɾ3PXͬͯԿ
    NBQܗࣜͰهड़Ͱ͖ͳ͍
    ɾIFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱμϝʁ
    ɾΞΠςϜͷߴ͞ʁ ݁ߏΫη͕͋ΔΑͶɺͱ͍͏ͷ͕ ࠓճͷຊ୊Ͱ͢

18. 2,ݱঢ়෼ੳͱ໰୊఺ 6*্͸͜͏ͳΓ·͢ ͍͍ͱ͜Ζ
    ɾສ݅දࣔͯ͠΋ಈ࡞͕͍ܰʂ
    ࠷ॳͷNBQΛ࢖͏ͱສ݅͋ͨΓ͕ݶք
    ඍົͳͱ͜Ζ
    ɾԼ͕༨ͬͯΔ ߴ͕͞ʹͰ͖͍ͯͳ͍
    

    ɾݸʑͷΞΠςϜͷߴ͞Λݻఆ͢Δඞཁ͕͋Δ

19. ٙ໰
    ᶃ 2
    3PXͬͯԿ
    NBQܗࣜͰ
    هड़Ͱ͖ͳ͍ͷʁ
    "
    *UFNΛҰݸͣͭϨϯμϦϯά͢ΔͷͰ͸ͳ ͘ɺඞཁͳݸ਺͚ͩϨϯμϦϯά͢Δɻ
    શ෦ϨϯμϦϯά͠ͳ͍ͷͰɺ3PX͸ྻͭ ͋ͨΓͷ಺༰Ͱ͋Δඞཁ͕͋Δɻ
    

20. 2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ͓͞Β͍ ɾશମͷߴ͞
    
    ΞΠςϜͭͷαΠζ
    ʷ
    ݸ਺
    ɾඳը࢝͠ΊΔߴ͞
    
    ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

21. 2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰
    ᶄ 2
    IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ
    "
    SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹
    େৎ෉

22. 2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰
    ᶄ 2
    IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ
    "
    SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹
    େৎ෉
    ࣮૷ޙ͸ͪ͜Β

23. 2,ݱঢ়෼ੳͱ໰୊఺ 2
    ΞΠςϜͷߴ͞ʁ
    
    
    "
    શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ
    ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ ٙ໰
    ᶅ

24. 2,ݱঢ়෼ੳͱ໰୊఺ 2
    ΞΠςϜͷߴ͞ʁ
    
    
    "
    શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ
    ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ 7BSJBCMF4J[F-JTUΛར༻Ͱ͖Δ΋ͷͷɺ
    ͋Β͔͡Ίߴ͕͞Θ͔͍ͬͯͳ͍ͱ࡞Εͳ͍ ٙ໰
    ᶅ

25. 2,ݱঢ়෼ੳͱ໰୊఺ ಉ͜͡ͱΛ͍͚ͨͩ͠ ͳͷʹʜɻ

26. 2,ݱঢ়෼ੳͱ໰୊఺ ݁ߏ͠ΜͲ͍

27. 2,ݱঢ়෼ੳͱ໰୊఺ ݁࿦
    ແཧͯ͠࢖͏͜ͱ͸ͳ͍ ɾϓϩδΣΫτͷ࠷ॳ͸ͦΕͦ͜NBQͷ࣮૷Ͱे෼
    ɾগ͠ॏ͍ఔ౓Ͱ͋Ε͹ɺը૾ͷ-B[ZMPBEJOHɾඳը਺Λ
    ݮΒ͢ͳͲͰରԠ
    ɾͦΕͰ΋ඳը͕໰୊ʹͳͬͯ͠·ͬͨ৔߹ͷΞϓϩʔν

28. 2,ݱঢ়෼ੳͱ໰୊఺ ผղ
    SFBDUWJSUVPTP ಉ͜͡ͱ͕Ͱ͖ͯɺ ݁ߏγϯϓϧ 4UBS
    L
    4J[F
    .#

29. 2,ݱঢ়෼ੳͱ໰୊఺ ผΞϓϩʔνฤ
    DPOUFOUWJTJCJMJUZ $44ͰͰ͖ΔͷͰൺֱత͓खܰɻ
    ର৅ϒϥ΢β͕$ISPNJVNܥ
    $ISPNF
    0QFSB
    &EHF ʹߜͬͯ Α͚Ε͹͋Γ

30. 2,ݱঢ়෼ੳͱ໰୊఺ ࠷ޙʹ ʰ࢒೦ͳ͕Βɺ؆୯ͳमਖ਼͸͚ͭͩͰ͸͋Γ·ͤΜɻύϑΥʔϚϯε͸ɺ վળ͢ΔྖҬΛ؂ࢹ͓Αͼଌఆ͢ΔܧଓతͳήʔϜͰ͢ɻʱ ࠓճͷ࿩Λखࡳͷͭͱͯ͠࢖͍͚ͬͯͨͩͨΒ ͱࢥ͍·͢ʂ

31. ࢀߟจݙ ʮύϑΥʔϚϯε࠷దԽʯIUUQTKBSFBDUKTPSHEPDTPQUJNJ[JOHQFSGPSNBODFIUNMWJSUVBMJ[FMPOHMJTUT ʮ5XJUUFS
    -JUF
    BOE
    )JHI
    1FSGPSNBODF
    3FBDU
    1SPHSFTTJWF
    8FC
    "QQT
    BU
    4DBMFʯ
    IUUQTNFEJVNDPN!QBVMBSNTUSPOHUXJUUFSMJUFBOEIJHIQFSGPSNBODFSFBDUQSPHSFTTJWF XFCBQQTBUTDBMFEBFB ʮSFBDUXJOEPXʯIUUQTHJUIVCDPNCWBVHIOSFBDUXJOEPXIPXJTSFBDUXJOEPX EJ ff FSFOUGSPNSFBDUWJSUVBMJ[FE
    ͔Βҙ༁
    ʮSFBDUWJSUVBMJ[FE
    
    OQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUWJSUVBMJ[FE
    

    ʮSFBDUXJOEPX
    
    OQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUXJOEPX ʮ࠲ΔೣͷΠϥετʯIUUQTXXXJSBTVUPZBDPNCMPHQPTU@IUNM ʮDPOUFOUWJTJCJMJUZʯIUUQTXFCEFWDPOUFOUWJTJCJMJUZ

32. Thank you!