うわっ…リスト表示重すぎ… 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!