React製SPAにおけるパフォーマンスチューニング

2018/11/24 東京Node学園祭2018での、辻の講演資料になります

Transcript

1. React੡ SPA ʹ͓͚Δ ύϑΥʔϚϯενϡʔχϯά Kento TSUJI (@maxmellon)
 Recruit Technologies Co., Ltd.
2. ࣗݾ঺հ • Github: @maxmellon • Twitter: @maxmellon_9039 • ϦΫϧʔτςΫϊϩδʔζ 18೥ ৽ଔೖࣾ
 ࣾձਓྺ ൒೥ʂʂʂ (Vim ྺ 5೥) • ޷෺: ͏ͲΜ, Vim, pipeline-operator
3. maxmellon/vim-jsx-pretty 157 ⭐
4. ReactύϑΥνϡهࣄͰ ͸ͯͿ500 ߦ͖·ͨ͠ ✨
5. ͬͦ͘͞Ͱ͕͢
6. SPAʹԿΛٻΊ·͔͢ʁ
7. ྫ͑͹
8. ͵Δͬͱ
9. ͬ͘͘͞͞ͱ
10. ௚ײతʹ
11. ͭ·Γ SPA ʹ ٻΊΒΕ͍ͯΔ΋ͷ͸ ѹ౗తͳϢʔβʔମݧ
12. ѹ౗తͳϢʔβʔମݧΛ ࣮ݱ͢Δʹ͸Կ͕ඞཁ͔ʁ
13. ύϑΥʔϚϯε
14. Ϧονͳදݱྗ
15. Մ༻ੑ ʢΦϑϥΠϯͰ࢖͑Δʣ
16. ࠓճ͸ SPAʹ͓͚ΔύϑΥʔϚϯε ʹ͍͓ͭͯ࿩Λ͠·͢
17. • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ SPAʹ͓͚ΔύϑΥʔϚϯε
18. SPAʹ͓͚ΔύϑΥʔϚϯε • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ
 ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ
 ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ

19. SPAʹ͓͚ΔύϑΥʔϚϯε • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ
 ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ
 ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ
 ॏཁͰ͕͢ɺࠓ೔͸͜ͷ࿩͸͠·ͤΜ
20. ࠓ೔࿩͢಺༰ • ࢀߟ: ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ • https://yosuke-furukawa.hatenablog.com/entry/ 2014/11/14/141415 Ϣʔβʔͷೖྗʹਝ଎ʹରԠ͢Δ
21. ϦΫϧʔτʹ͓͚ΔSPA • AirSHIFTͱ͍͏αʔϏε͕͋Δ • γϑτද͕௚ײతʹ࡞ΕΔ • React / Redux + BFF (redux-pluto) • Component ਺ ໿600 ݸͱ͍͏େن໛ͳSPA • ௚ײతʹγϑτΛ࡞੒͢ΔͨΊʹ
 υϥοάΞϯυυϩοϓΛ࠾༻
22. AirSHIFT ͱ͸
26. • γϑτදͷ࡞੒Λ࢝Ίͱͨ͠ళ௕ۀ຿ͷ
 αϙʔτ • ௚ײతʹૢ࡞Ͱ͖ΔΑ͏ʹ
 υϥοάΞϯυυϩοϓͳͲͷૢ࡞͕͋Δ • γϑτදͷ੾Γସ͑ʹ
 ͕͔͔͍࣌ؒͬͯΔ໰୊͕͋ͬͨ AirSHIFT ͱ͸
27. BFF Client API Isomorphic Session Data Notification
 Server Redis FCM wrapper React/Redux Fetchr CSR SSR DB Push
 Notification WebSocket OAuth γϑτ
 Ϙʔυ
 ʢ࿈ܞΞϓϦʣ ΞʔΩςΫνϟ
28. ࠓ೔͸AirSHIFT Ͱߦͬͨ ύϑΥʔϚϯεվળΛ ঺հ͠·͢
29. ͔͜͜Β͕ຊ୊Ͱ ࣮ࡍʹ͋ͬͨ࿩Ͱ͢
30. ͋Δ೔ "JS4)*'5ར༻͍ͯ͠ΔͷͰ͕͢
    Ξοϓσʔτ͕͔͋ͬͯΒ
    ͘͢͝ॏ͍ΜͰ͢ΑͶʜ
    Ͳ͏ʹ͔ͯ͠
 ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ ͳΔ΄Ͳʜ ࣗ෼ͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ
31. ͸͍
    ͋Γ͕ͱ͏͍͟͝·͢ʙ ճઢ͕ऑ͍ͷ͔ͳʜ
    "1*͕ॏ͍ͷ͔ʜ ͪΐͬͱ͓࢕͍ͯ͠
    ௐࠪͯ͠΋ΑΖ͍͠Ͱ͠ΐ͏͔ʁ εςʔδϯάαʔόʔͷ
    ΋ͷ͸ͦΜͳʹ஗͘ͳ͍ͳʜ
32. ௐࠪ͢Δͱ ϘτϧωοΫͷ΄ͱΜͲ͕4DSJQUJOH
    ˋ 4DSJQUJOH
    ͸
    KBWBTDSJQU
    ͷ࣮ߦʹ֘౰
33. ࠷ॳͷࢪࡦ • શ෦·ͱΊͯίϯϙʔωϯτͷ
 ࠶ϨϯμϦϯάΛݮΒͦ͏ͱͨ͠ • εΫϦϓτͷ࣮ߦ͕஗͍͔ΒϘτϧωοΫ͸
 redux·ΘΓʹܾ·͍ͬͯΔͩΖ͏ ͜͜ͰͳΜͱ͔͢Ε͹࠶ϨϯμϦϯάΛ
 ݮΒͤΔͷͰ͸ʁ
34. Redux ΞʔΩςΫνϟ View "DUJPOT .JEEMFXBSF Reducer 4UBUF Store DPOOFDU
35. Redux ΞʔΩςΫνϟ View "DUJPOT .JEEMFXBSF Reducer 4UBUF Store DPOOFDU
36. connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
37. connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
38. connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
    
    3FEVDFS
    ͕
    

    
    \

    
    
    
    
    
    
    TUBUF 

    
    
    
    
    BOZ0CKFDU 

    
    ^

    
    ͯ͠Δ
39. connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    
    3FEVDFS
    ͕
    

    
    \

    
    
    
    
    
    
    TUBUF 

    
    
    
    
    BOZ0CKFDU 

    
    ^

    
    ͯ͠Δ
    
    ͜ͷઌ͔ΒมߋΛ఻ୡ
    
    
    ͠ͳ͍Α͏ʹ͢Ε͹͍͍ͷͰ͸ʂ
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
40. …͕ μϝ
41. ਪଌ͢Δͳ ܭଌͤΑ
42. ਪଌ͢Δͳ (ਅҼΛಛఆ͢Δ·Ͱ) ܭଌͤΑ
43. ഊҼ • ௐ͕ࠪ؁͍ • ਅҼΛಛఆ͢Δ·Ͱͷܭଌ͕
 Ͱ͖͍ͯͳ͔ͬͨ • Connect શ෦ࠩ͠ସ͑ͨͷ͕μϝͩͬͨ
 O(N^2) ͳͷͰൺֱࣗମ͕ॏ͍
44. ͲΜͳௐࠪΛ͢Δ͔ • Scripting ͷ಺༁ΛݟΔ • ؔ਺ͷίʔϧελοΫΛపఈతʹௐ΂Δ • React಺෦ͰԿ͕ى͍ͬͯ͜Δ͔Λௐ΂Δ ϘτϧωοΫͷਅҼΛݟ͚ͭΔ·Ͱ۷Γ͛͞Δ
45. Dev Tools Λ పఈతʹ࢖͍౗͢
46. Performance Profiler
47. React Dev Tools (Highlight Update)
48. React Dev Tools (Profiler)
49. Network Timing
50. User Timing
51. What is the User Timing API ?
52. User Timing API ͱ͸ • ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API • ͋Δ఺͔Β͋Δ఺·Ͱͷॲཧ͕࣌ؒݟΕΔ • Node ʹ΋͋Δ
 > require(‘perf_hooks’).performance
53. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
54. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
55. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
56. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.mesure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠
    %FW
    5PPMT
    Ͱ
    ύϑΥʔϚϯεΛܭଌ͢Δ
58. React 16 ͔Β User Timing API͕ఏڙ • React 16 ͔ΒUser Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸ DevTools ͰݟΔ͚ͩͰ OK • React ͕ ΠΠΧϯδʹ
 `performance.mark, measure` ͯ͘͠Ε͍ͯΔ
60. ศརͰ͸͋Δ͕ “ਅҼ” Λಥ͖٧ΊΔʹ͸ গ͠՝୊͕͋ͬͨ
61. ՝୊ • Ϣʔβʔͷૢ࡞ ͱ Component ͷ
 ϨϯμϦϯάͷؔ܎ੑ͕Θ͔Βͳ͍ • Կ͕͖͔͚ͬʹ
 ࠶ϨϯμϦϯά͞Ε͍ͯΔ͔͕Θ͔Βͳ͍ Ͳͷૢ࡞͕ॏ͍ͷ͔͔ͬ͠Γ੾Γ෼͚͍ͨ
62. redux-action-timing-middleware
63. maxmellon/redux-action-timing-middleware
64. Ͱ͖Δ͜ͱ • ΞΫγϣϯͱComponentͷϨϯμϦϯάͷ
 ؔ܎͕ௐ΂ΕΔ • ྫ͑͹ LOCATION/CHANGE ͳͲͰ
 શؔ͘܎ແ͍ίϯϙʔωϯτ͕Ξοϓσʔτ
 ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
65. redux-action-timing-middleware ͕஫ೖͨ͠
 UserTiming ͸ ֆจࣈQSFpY
66. γϑτදͷ σʔλͷऔಘ੒ޭ ͱ͍͏ΞΫγϣϯͰ
 ൃੜͨ͠࠶ϨϯμϦϯά
67. ϩʔσΟϯάΠϯδέʔλʔ࡟আʹΑͬͯ
 ൃੜͨ͠࠶ϨϯμϦϯά
68. • Redux ͷΞΫγϣϯ͸
 Ϣʔβʔͷૢ࡞ͱඥ෇͍͍ͯΔ
 ex. handleClick
 ex. handleInput • Α͔ͬͨΒελʔ͍ͩ͘͞ʂʂʂʂ Ͳͷૢ࡞ͰԿ͕ϨϯμϦϯά͞Ε͔͕ͨΘ͔Δ ಋೖޙ
69. վળͷΞϓϩʔν͸ େ͖̎ͭ͘
70. ॲཧ࣌ؒΛ΁Β͢
71. ॲཧ࣌ؒΛ΁Β͢
72. খ͘͢͞Δ ॲཧ࣌ؒΛ΁Β͢
73. ॲཧ࣌ؒΛݮΒ͢ • ؔ਺ͷॲཧ࣌ؒΛ୹͘͢Δ • ແବͳ࠶ܭࢉΛϝϞԽ͢Δ
 ϥΠϒϥϦͩͱ reselect, memoize ͳͲ…. • ແବͳϧʔϓΛ஍ಓʹ௵͢
74. ແବͳॲཧΛ͠ͳ͍
75. ແବͳॲཧΛ͠ͳ͍
76. ແବͳॲཧΛ͠ͳ͍
77. • ݺͿඞཁͷͳ͍ؔ਺Λݺ͹ͳ͍Α͏ʹ͢Δ • React/Redux ʹ͓͍ͯ͸ 
 reducer Ͱແବʹ৽͍͠stateΛฦ͞ͳ͍ • ઃܭϨϕϧͷݟ௚͕͠ඞཁͳέʔε͕ଟ͍ ແବͳॲཧΛ͠ͳ͍
78. ͜ΕΒΛ౿·͑ͯ ௐࠪ
79. ͍͔ͭ͘ؾʹͳΔ఺͕ ݟ͔͕ͭͬͨ ͦͷதͰ΋ҟ࣭ͳ΋ͷ͕͋ͬͨ
80. ո͍͠Օॴ ΍ͨΒಉ͡ϒϩοΫ͕େྔʹ͋Δ…
81. ո͍͠Օॴ ͜Ε΋
82. ͜Ε΋ ո͍͠Օॴ
83. ͜Ε΋ ո͍͠Օॴ
84. ໌Β͔ʹͳΔϘτϧωοΫ ͥʔΜͿ Reconciliation
85. ͜Ε΋ ո͍͠Օॴ
86. ͦ΋ͦ΋ Reconciliationͬͯʁ
87. Reconciliation ͱ͸ • Ծ૝DOMϨϕϧͰಉ͔͡Ͳ͏͔Λൺֱͯ͠
 ࣮DOMʹcommit͢Δ͔Ͳ͏͔Λ൑ఆ • ͨͱ͑ SCU ͕ true ͩͱͯ͠΋
 Ծ૝DOMϨϕϧͰ౳͍͠৔߹
 commit ͞Εͳ͍
88. Tree Reconciliation TFU4UBUF
89. Tree Reconciliation 4$6
    USVF TFU4UBUF 4$6
    TIPVME$PNQPOFOU6QEBUF /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO
90. Tree Reconciliation 4$6
    USVF OFX1SPQT
    ˠ OFX1SPQT
    ˠ 4$6GBMTF 4$6USVF TFU4UBUF SFOEFS 4$6
    TIPVME$PNQPOFOU6QEBUF /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO
91. Tree Reconciliation 4$6
    USVF OFX1SPQT
    ˠ OFX1SPQT
    ˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQT
    ˠ OFX1SPQT
    ˠ SFOEFS SFOEFS 4$6USVF 4$6GBMTF
    
    ྘ͷՕॴ͸

    
    3FDPODJMJBUJPO
    ͕

    
    ൃੜ͢Δ /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO 4$6
    TIPVME$PNQPOFOU6QEBUF
92. Tree Reconciliation /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO
93. Tree Reconciliation 4$6
    USVF OFX1SPQT
    ˠ OFX1SPQT
    ˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQT
    ˠ OFX1SPQT
    ˠ SFOEFS SFOEFS 4$6USVF 4$6GBMTF
    
    ྘ͷՕॴ͸

    
    3FDPODJMJBUJPO
    ͕

    
    ൃੜ͢Δ /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO 4$6
    TIPVME$PNQPOFOU6QEBUF
94. ͦ΋ͦ΋ shouldComponentUpdate ͱ͸ʁ
95. React ʹ ͓͚Δ LifeCycle • ͦ΋ͦ΋ React ʹ͸ϥΠϑαΠΫϧ͕͋Δ • shouldComponentUpdate ͱ͍͏ͷ͸
 ϥΠϑαΠΫϧͷ1ͭ • ੹຿͸ɺࠩ෼ϨϯμϦϯά͕ඞཁ͔Ͳ͏͔ͷ
 ൑ఆΛߦ͏͜ͱ
96. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU 6QEBUF
    3FBDU
    %0.
    BOE
    SFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF
97. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU 6QEBUF
    3FBDU
    %0.
    BOE
    SFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF
    ͍͕ͭ͜
    USVF
    Λ

    ฦͨ͠ͱ͖ͷΈ

    ࠶ϨϯμϦϯά HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF
98. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU 6QEBUF
    3FBDU
    %0.
    BOE
    SFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF
    ͍͕ͭ͜
    USVF
    Λ

    ฦͨ͠ͱ͖ͷΈ

    ࠶ϨϯμϦϯά HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF
    
    σϑΥϧτ͸

    
    ৗʹ5SVFΛฦ٫
99. ࣮ࡍʹݟͯΈΔ
100. Ͳ͏ݮΒ͔͢
101. Tree Reconciliation 4$6
     USVF OFX1SPQT
     ˠ OFX1SPQT
     ˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQT
     ˠ OFX1SPQT
     ˠ SFOEFS SFOEFS 4$6USVF 4$6GBMTF ͦ΋ͦ΋໦ߏ଄
     খ͘͢͞Ε͹͍͍͡ΌΜ
102. Reconciliation Λ΁Β͢ ̎ͭͷΞϓϩʔν • ໦ߏ଄Λখ͘͢͞Δ
 㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ

103. Tree Reconciliation /P
     /FFE
     3FDPODJMJBUJPO /FFE
     3FDPODJMJBUJPO
104. shouldComponentUpdate Ͱ Reconciliation ΛݮΒͤΔ
105. Reconciliation Λ΁Β͢ ̎ͭͷΞϓϩʔν • ໦ߏ଄Λখ͘͢͞Δ
 㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ • ෆཁͳReconciliation Λ͠ͳ͍
 shouldComponentUpdate Λ ॻ͘
 㱺 falseΛฦͨ͠ͱ͔͜Βࢠ͸ݟͳ͘ͳΔ
106. ۩ମతʹ ໦ߏ଄Λখ͘͢͞Δͱ͸ Ͳ͏͍͏͜ͱ͔
107. ϒϥ΢βͷ
 ΢Οϯυ΢αΠζ
108. ඳը͞Ε͍ͯΔDOMͷαΠζ ϒϥ΢βͷ
 ΢Οϯυ΢αΠζ
109. ݟ͑ͯͳ͍෦෼ͷDOMΛඳը͢Δඞཁͳ͍!!! ͜ͷ෦෼͔͠
 ݟ͑ͳ͍
110. ͜ΕΛ࣮ݱ͢Δͷ͕
111. React-Virtualized
112. React-Virtualizedͱ͸ • ڊେͳϦετ΍දΛ
 ޮ཰Α͘ඳը͢ΔͨΊͷϥΠϒϥϦ • ແݶεΫϩʔϧͱ͔Ծ૝εΫϩʔϧ͕Ͱ͖Δ • ࣮ࡍʹ΍͍ͬͯΔ͜ͱ͸ඳըൣғ֎Unmount
 εΫϩʔϧํ޲Λݟͯ௚લͰMount
113. ͭ·Γ
114. ͜Ε͕
115. ͜͏ͳΔ
116. લޙͦΕͧΕόοϑΝ͕ඞཁ ͳͥͳΒεΫϩʔϧ࣌ʹਅͬനʹͳΔ
117. ໦ߏ଄͸খ͘͞Ͱ͖ͨ
118. ͨͩ
119. ·ͩ ෆཁͳ Reconciliation ͕͋Δ
120. ෆཁͳ Reconciliation Λ͠ͳ͍
121. ͦ΋ͦ΋ γϑτද෦෼ͷίʔυΛ ΈͯΈΔͱ
122. 3ͭͷͰ͔͍ίϯϙʔωϯτ͔Βߏ੒͞Ε͍ͯͨ
123. Կ͕ѱ͍͔
124. ͨͱ͑͹ ੺࿮ͷՕॴ͚ͩ ࠶ϨϯμϦϯά͍ͨ͠ͱ͢Δ
125. shouldComponentUpdate ʹΑΔ൑ఆ͸
 ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍
126. shouldComponentUpdate ʹΑΔ൑ఆ͸
 ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍ Ұ෦෼Λߋ৽͢ΔͨΊʹ
 શ෦Λߋ৽͢Δ͔͠ແ͍
127. ໌Β͔ʹͳΔϘτϧωοΫ ࠩ෼ϨϯμϦϯάͷ ࢫຯ͕…
128. Ͳ͏͢Δ͔
129. ίϯϙʔωϯτΛখ۠͘͞੾Δ
130. ͜ͷΞϓϩʔνͷྑ͍ͱ͜Ζ
131. ͜ͷΞϓϩʔνͷڧΈ • ٕज़తʹ೉͍͠ཁૉ͕͘͢ͳ͍
 ˠ ΊΜͲ͍͚ͩ͘͞ • shouldComponentUpdate ͸࠷ॳ͔Β
 ॻ͔ͳͯ͘΋ྑ͍
 → ॏ͘ͳΕ͹ॻ͚͹͍͍ • ίϯϙʔωϯτ͕খ͍͞ͱ props ͕গͳ͍
 → SCU Λॻ͔ͳͯ͘΋ React.memo ͳͲ͕࢖͑Δ
132. Fat ͳ Component ͸ ઈରμϝ
133. ผΕ͍ͯΔ͚ͩͰ ྑ͍఺͕ͨ͘͞Μ͋Δ͠ ࢪࡦ΋ଧͪ΍͍͢
134. Before / After
135. Before After 4ഒ௿଎؀ڥͰ 374% վળɺ10ඵ΄ͲεϐʔυΞοϓ
136. վળޙ γϑτද
     ૣ͘ͳΓ·ͨ͠Ͷʂ
     ͋Γ͕ͱ͏͍͟͝·͢ʂ Αͬ͠Ό
137. ͱ͸͍͑ • 3.6sec ͸଎͍ͱ͸ݴ͑ͳ͍ • ΍Γ࢒ͨ͠վળ΋͋Δ • Reducer Λ͖ͪΜͱ
 ઃܭ͠ͳ͓ͤ͹
 ແବͳߋ৽͕఻ୡ͞Εͳ͍
138. ·ͱΊ
139. ਪଌ͢Δͳ ܭଌͤΑ
140. ਪଌ͢ΔͳܭଌͤΑ • ͱΓ͋͑ͣͷܭଌ͸ݪҼͷ૚෼͚ʹա͗ͳ͍ • צͰࢼͯ͠΋͏·͍͔͘ͳ͍ • େࣄͳͷ͸ਅҼΛݟ͚ͭΔ·Ͱܭଌ͢Δ͜ͱ • Chrome Dev Tools / React Dev Tools
 ͕ܭଌ͢Δ্Ͱศར
141. ͦ΋ͦ΋ͳͥ ώΞϦϯά·Ͱ ൃ֮͠ͳ͔͔ͬͨ
142. ސ٬ͷPC͸ CPUͷॲཧೳྗ͕௿͔ͬͨ ։ൃ؀ڥͰ͸໰୊ͳ͔ͬͨ
143. ސ٬ͷ؀ڥͰ
 ύϑΥʔϚϯε͸
 ܭଌ͠ͳ͚Ε͹ͳΒͳ͍
144. ސ٬ͱಉ౳ͷ؀ڥͰ ύϑΥʔϚϯεΛௐ΂Δ • Fast 3G ճઢͰಈ͔͢ • x4 εϩοτϧ؀ڥͰಈ͔͢
145. ̍࣍։ൃ࣌఺Ͱ͸ ௿଎ঢ়ଶͰͷ ύϑΥʔϚϯε֬ೝ΋ ͍ͯͨ͠
146. ͦΕͰ΋ൃݟ͕஗Εͨͷ͸ ఆظతͳύϑΥʔϚϯεଌఆΛ ߦ͍ͬͯͳ͔͔ͬͨΒ
147. ఆظతͳύϑΥʔϚϯεଌఆͷॏཁੑ • ύϑΥʔϚϯε͸ػೳ௥Ճͱͱ΋ʹ
 ͲΜͲΜྼԽ͍ͯ͘͠ • ύϑΥʔϚϯεΛܧଓతɼఆظతʹݟ͍͖ͯ
 ಈ޲Λৗʹܭଌ͓ͯ͘͜͠ͱ͕େࣄ ͜Ε͕ͦ͜श׳ԽͰ͋Γɺ
     ύϑΥʔϚϯεଌఆΛߦ͏จԽͰ͋Δ
148. ࠓޙͷ՝୊
149. ύϑΥʔϚϯε͸
 վળͯ͠ऴΘΓͰ͸ͳ͍ ։ൃνʔϜʹश׳Խ
 ͤ͞Δ͜ͱ͕େ੾
150. ࠓޙͷ՝୊ • ͜ͷվળʹͱͲ·ΒͣνʔϜશମʹ
 ύϑΥʔϚϯεΛ؍ଌ͢ΔจԽΛࠜ෇͚Δ • ແବͳॲཧΛߦΘͳ͍վળʹνϟϨϯδ
 㱺 reducer ͷઃܭΛશ໘తʹݟ௚ͯ͠
 ແବͳ఻ୡΛͳ͘͢ • ઌಡΈʹΑΔσʔλͷઌߦऔಘʹνϟϨϯδ
151. ;Ζ͘
152. ָʹ shouldComponbentUpdate Λ ࣮૷͍ͨ͠
153. ָʹSCUΛ ࣮૷͢ΔͨΊͷϥΠϒϥϦ • PureComponent • recompose/pure • React.memo • ͳͲ…
154. ԿΛͯ͘͠ΕΔ͔
155. ԿΛͯ͘͠ΕΔ͔ • جຊతʹ͢΂ͯ fbjs/shallowEqual ͯ͘͠ΕΔ • React.memo ͸ $$type Λॻ͖׵͑ͯ
 ಺෦ͷ updater ͷϩδοΫΛࠩ͠ସ͑ͯΔ
 㱺 SCU ʹ shallowEqual ͕ೖΔͱࢥͬͯྑ͍
156. ͰɺͲΕ͕ྑ͍ͷʁ
157. ܭଌͯ͠Έͨ
159. ԣ࣠͸ prev === next ͷ֬཰ ॎ࣠͸ ࣌ؒ (ms)
162. ·ͱΊ • recompose/pure ͸ class Ͱ΋ ؔ਺ Ͱ΋
 ࢖͑Δ • React.memo ͸ؔ਺༻ • PureComponent ͸ Ϋϥε༻ • React.memo ͸ ΦϓγϣϯͰνϡʔχϯάͰ͖Δ
163. connect ୈ̐Ҿ਺
164. connect() // version5 connect( [mapStateToProps], [mapDispatchToProps], [mergeProps], [options] ): (React.Component<*>) => Recat.Component<*> ࣮͸4ͭ໨ͷҾ਺͕͋Δ
165. Options { pure = ture, areStatesEqual = (a, b) => a === b, areOwnPropsEqual = shallowEqual, areStatePropsEqual = shallowEqual, areMergedPropsEqual = shallowEqual, storeKey = ‘store’, } HoC ࣗମͷ࠶ϨϯμϦϯάͷ੍ޚ͕Ͱ͖Δ
166. connect() // version5 Component Store connect areStateEqual(prev, next) next = mapStateToProps(prev, next) prev = next // memoized once Update Childe Component // return true 
 in shouldComponentUpdate of HoC
167. connect() // version5 Component Store connect areStateEqual(prev, next) next = mapStateToProps(prev, next) prev = next // memoized once 7FSTJPO
     ͸
     )P$
     ϕʔε Update Childe Component // return true 
 in shouldComponentUpdate of HoC
168. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next) prev = next // memoized once
     
     PQUJPOQVSF
     
     
     
     
     
     
     
     4IBMMPX&RVBM
     
     
     
     
     
     
     
     
     4USJDU&RVBM Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component
169. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next) prev = next // memoized once
     
     ୈ̐Ҿ਺ͰΦʔόϥΠυͰ͖Δ
     
     
     QSFW
     4UBUF
     OFYU
     4UBUF
     
     CPPMFBO Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component
170. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next) prev = next // memoized once Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component
     
     લճͷ݁ՌΛอ͓࣋ͯ͘͠
171. connect ·ͱΊ • HoCͰ࣮૷͞Ε͍ͯΔ • Connect ͷ areStateEqual ͕ false Λฦͤ͹
 ࢠίϯϙʔωϯτͷ࠶ϨϯμϦϯάͳ͠ • ୈ4Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ