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

Transcript

1. 1.

   React੡ SPA ʹ͓͚Δ ύϑΥʔϚϯενϡʔχϯά Kento TSUJI (@maxmellon)
 Recruit Technologies Co.,

   Ltd.
2. 2.

   ࣗݾ঺հ • Github: @maxmellon • Twitter: @maxmellon_9039 • ϦΫϧʔτςΫϊϩδʔζ 18೥

   ৽ଔೖࣾ
 ࣾձਓྺ ൒೥ʂʂʂ (Vim ྺ 5೥) • ޷෺: ͏ͲΜ, Vim, pipeline-operator
3. 3.

   maxmellon/vim-jsx-pretty 157 ⭐

4. 4.

   ReactύϑΥνϡهࣄͰ ͸ͯͿ500 ߦ͖·ͨ͠ ✨

5. 5.

   ͬͦ͘͞Ͱ͕͢

6. 6.

   SPAʹԿΛٻΊ·͔͢ʁ

7. 7.

   ྫ͑͹

8. 8.

   ͵Δͬͱ

9. 9.

   ͬ͘͘͞͞ͱ

10. 10.

    ௚ײతʹ

11. 11.

    ͭ·Γ SPA ʹ ٻΊΒΕ͍ͯΔ΋ͷ͸ ѹ౗తͳϢʔβʔମݧ

12. 12.

    ѹ౗తͳϢʔβʔମݧΛ ࣮ݱ͢Δʹ͸Կ͕ඞཁ͔ʁ

13. 13.

    ύϑΥʔϚϯε

14. 14.

    Ϧονͳදݱྗ

15. 15.

    Մ༻ੑ ʢΦϑϥΠϯͰ࢖͑Δʣ

16. 16.

    ࠓճ͸ SPAʹ͓͚ΔύϑΥʔϚϯε ʹ͍͓ͭͯ࿩Λ͠·͢

17. 17.

    • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ SPAʹ͓͚ΔύϑΥʔϚϯε

18. 18.

    SPAʹ͓͚ΔύϑΥʔϚϯε • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ
 ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ
 ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ


19. 19.

    SPAʹ͓͚ΔύϑΥʔϚϯε • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ
 ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ
 ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ
 ॏཁͰ͕͢ɺࠓ೔͸͜ͷ࿩͸͠·ͤΜ

20. 20.

    ࠓ೔࿩͢಺༰ • ࢀߟ: ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ • https://yosuke-furukawa.hatenablog.com/entry/ 2014/11/14/141415 Ϣʔβʔͷೖྗʹਝ଎ʹରԠ͢Δ

21. 21.

    ϦΫϧʔτʹ͓͚ΔSPA • AirSHIFTͱ͍͏αʔϏε͕͋Δ • γϑτද͕௚ײతʹ࡞ΕΔ • React / Redux +

    BFF (redux-pluto) • Component ਺ ໿600 ݸͱ͍͏େن໛ͳSPA • ௚ײతʹγϑτΛ࡞੒͢ΔͨΊʹ
 υϥοάΞϯυυϩοϓΛ࠾༻
22. 22.

    AirSHIFT ͱ͸

23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    • γϑτදͷ࡞੒Λ࢝Ίͱͨ͠ళ௕ۀ຿ͷ
 αϙʔτ • ௚ײతʹૢ࡞Ͱ͖ΔΑ͏ʹ
 υϥοάΞϯυυϩοϓͳͲͷૢ࡞͕͋Δ • γϑτදͷ੾Γସ͑ʹ
 ͕͔͔͍࣌ؒͬͯΔ໰୊͕͋ͬͨ AirSHIFT

    ͱ͸
27. 27.

    BFF Client API Isomorphic Session Data Notification
 Server Redis FCM

    wrapper React/Redux Fetchr CSR SSR DB Push
 Notification WebSocket OAuth γϑτ
 Ϙʔυ
 ʢ࿈ܞΞϓϦʣ ΞʔΩςΫνϟ
28. 28.

    ࠓ೔͸AirSHIFT Ͱߦͬͨ ύϑΥʔϚϯεվળΛ ঺հ͠·͢

29. 29.

    ͔͜͜Β͕ຊ୊Ͱ ࣮ࡍʹ͋ͬͨ࿩Ͱ͢

30. 30.

    ͋Δ೔ "JS4)*'5ར༻͍ͯ͠ΔͷͰ͕͢
    Ξοϓσʔτ͕͔͋ͬͯΒ
    ͘͢͝ॏ͍ΜͰ͢ΑͶʜ
    Ͳ͏ʹ͔ͯ͠
 ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ ͳΔ΄Ͳʜ ࣗ෼ͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ

31. 31.

    ͸͍
    ͋Γ͕ͱ͏͍͟͝·͢ʙ ճઢ͕ऑ͍ͷ͔ͳʜ
    "1*͕ॏ͍ͷ͔ʜ ͪΐͬͱ͓࢕͍ͯ͠
    ௐࠪͯ͠΋ΑΖ͍͠Ͱ͠ΐ͏͔ʁ εςʔδϯάαʔόʔͷ
    ΋ͷ͸ͦΜͳʹ஗͘ͳ͍ͳʜ

32. 32.

    ௐࠪ͢Δͱ ϘτϧωοΫͷ΄ͱΜͲ͕4DSJQUJOH
    ˋ 4DSJQUJOH
    ͸
    KBWBTDSJQU
    ͷ࣮ߦʹ֘౰

33. 33.

    ࠷ॳͷࢪࡦ • શ෦·ͱΊͯίϯϙʔωϯτͷ
 ࠶ϨϯμϦϯάΛݮΒͦ͏ͱͨ͠ • εΫϦϓτͷ࣮ߦ͕஗͍͔ΒϘτϧωοΫ͸
 redux·ΘΓʹܾ·͍ͬͯΔͩΖ͏ ͜͜ͰͳΜͱ͔͢Ε͹࠶ϨϯμϦϯάΛ
 ݮΒͤΔͷͰ͸ʁ

34. 34.

    Redux ΞʔΩςΫνϟ View "DUJPOT .JEEMFXBSF Reducer 4UBUF Store DPOOFDU

35. 35.

    Redux ΞʔΩςΫνϟ View "DUJPOT .JEEMFXBSF Reducer 4UBUF Store DPOOFDU

36. 36.

    connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"

37. 37.

    connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

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

38. 38.

    connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

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

    
    \

    
    
    
    
    
    
    TUBUF

    

    
    
    
    
    BOZ0CKFDU 

    
    ^

    
    ͯ͠Δ
39. 39.

    connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU"
    
    3FEVDFS
    ͕
    

    
    \

    
    
    
    
    
    
    TUBUF 

    
    
    
    
    BOZ0CKFDU

    

    
    ^

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

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
40. 40.

    …͕ μϝ

41. 41.

    ਪଌ͢Δͳ ܭଌͤΑ

42. 42.

    ਪଌ͢Δͳ (ਅҼΛಛఆ͢Δ·Ͱ) ܭଌͤΑ

43. 43.

    ഊҼ • ௐ͕ࠪ؁͍ • ਅҼΛಛఆ͢Δ·Ͱͷܭଌ͕
 Ͱ͖͍ͯͳ͔ͬͨ • Connect શ෦ࠩ͠ସ͑ͨͷ͕μϝͩͬͨ
 O(N^2)

    ͳͷͰൺֱࣗମ͕ॏ͍
44. 44.

    ͲΜͳௐࠪΛ͢Δ͔ • Scripting ͷ಺༁ΛݟΔ • ؔ਺ͷίʔϧελοΫΛపఈతʹௐ΂Δ • React಺෦ͰԿ͕ى͍ͬͯ͜Δ͔Λௐ΂Δ ϘτϧωοΫͷਅҼΛݟ͚ͭΔ·Ͱ۷Γ͛͞Δ

45. 45.

    Dev Tools Λ పఈతʹ࢖͍౗͢

46. 46.

    Performance Profiler

47. 47.

    React Dev Tools (Highlight Update)

48. 48.

    React Dev Tools (Profiler)

49. 49.

    Network Timing

50. 50.

    User Timing

51. 51.

    What is the User Timing API ?

52. 52.

    User Timing API ͱ͸ • ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API • ͋Δ఺͔Β͋Δ఺·Ͱͷॲཧ͕࣌ؒݟΕΔ •

    Node ʹ΋͋Δ
 > require(‘perf_hooks’).performance
53. 53.

    performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
54. 54.

    performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
55. 55.

    performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
56. 56.

    performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.mesure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠
    %FW
    5PPMT
    Ͱ
    ύϑΥʔϚϯεΛܭଌ͢Δ
57. 57.

    None
58. 58.

    React 16 ͔Β User Timing API͕ఏڙ • React 16 ͔ΒUser

    Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸ DevTools ͰݟΔ͚ͩͰ OK • React ͕ ΠΠΧϯδʹ
 `performance.mark, measure` ͯ͘͠Ε͍ͯΔ
59. 59.

    None
60. 60.

    ศརͰ͸͋Δ͕ “ਅҼ” Λಥ͖٧ΊΔʹ͸ গ͠՝୊͕͋ͬͨ

61. 61.

    ՝୊ • Ϣʔβʔͷૢ࡞ ͱ Component ͷ
 ϨϯμϦϯάͷؔ܎ੑ͕Θ͔Βͳ͍ • Կ͕͖͔͚ͬʹ
 ࠶ϨϯμϦϯά͞Ε͍ͯΔ͔͕Θ͔Βͳ͍

    Ͳͷૢ࡞͕ॏ͍ͷ͔͔ͬ͠Γ੾Γ෼͚͍ͨ
62. 62.

    redux-action-timing-middleware

63. 63.

    maxmellon/redux-action-timing-middleware

64. 64.

    Ͱ͖Δ͜ͱ • ΞΫγϣϯͱComponentͷϨϯμϦϯάͷ
 ؔ܎͕ௐ΂ΕΔ • ྫ͑͹ LOCATION/CHANGE ͳͲͰ
 શؔ͘܎ແ͍ίϯϙʔωϯτ͕Ξοϓσʔτ
 ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ

65. 65.

    redux-action-timing-middleware ͕஫ೖͨ͠
 UserTiming ͸ ֆจࣈQSFpY

66. 66.

    γϑτදͷ σʔλͷऔಘ੒ޭ ͱ͍͏ΞΫγϣϯͰ
 ൃੜͨ͠࠶ϨϯμϦϯά

67. 67.

    ϩʔσΟϯάΠϯδέʔλʔ࡟আʹΑͬͯ
 ൃੜͨ͠࠶ϨϯμϦϯά

68. 68.

    • Redux ͷΞΫγϣϯ͸
 Ϣʔβʔͷૢ࡞ͱඥ෇͍͍ͯΔ
 ex. handleClick
 ex. handleInput • Α͔ͬͨΒελʔ͍ͩ͘͞ʂʂʂʂ

    Ͳͷૢ࡞ͰԿ͕ϨϯμϦϯά͞Ε͔͕ͨΘ͔Δ ಋೖޙ
69. 69.

    վળͷΞϓϩʔν͸ େ͖̎ͭ͘

70. 70.

    ॲཧ࣌ؒΛ΁Β͢

71. 71.

    ॲཧ࣌ؒΛ΁Β͢

72. 72.

    খ͘͢͞Δ ॲཧ࣌ؒΛ΁Β͢

73. 73.

    ॲཧ࣌ؒΛݮΒ͢ • ؔ਺ͷॲཧ࣌ؒΛ୹͘͢Δ • ແବͳ࠶ܭࢉΛϝϞԽ͢Δ
 ϥΠϒϥϦͩͱ reselect, memoize ͳͲ…. •

    ແବͳϧʔϓΛ஍ಓʹ௵͢
74. 74.

    ແବͳॲཧΛ͠ͳ͍

75. 75.

    ແବͳॲཧΛ͠ͳ͍

76. 76.

    ແବͳॲཧΛ͠ͳ͍

77. 77.

    • ݺͿඞཁͷͳ͍ؔ਺Λݺ͹ͳ͍Α͏ʹ͢Δ • React/Redux ʹ͓͍ͯ͸ 
 reducer Ͱແବʹ৽͍͠stateΛฦ͞ͳ͍ • ઃܭϨϕϧͷݟ௚͕͠ඞཁͳέʔε͕ଟ͍

    ແବͳॲཧΛ͠ͳ͍
78. 78.

    ͜ΕΒΛ౿·͑ͯ ௐࠪ

79. 79.

    ͍͔ͭ͘ؾʹͳΔ఺͕ ݟ͔͕ͭͬͨ ͦͷதͰ΋ҟ࣭ͳ΋ͷ͕͋ͬͨ

80. 80.

    ո͍͠Օॴ ΍ͨΒಉ͡ϒϩοΫ͕େྔʹ͋Δ…

81. 81.

    ո͍͠Օॴ ͜Ε΋

82. 82.

    ͜Ε΋ ո͍͠Օॴ

83. 83.

    ͜Ε΋ ո͍͠Օॴ

84. 84.

    ໌Β͔ʹͳΔϘτϧωοΫ ͥʔΜͿ Reconciliation

85. 85.

    ͜Ε΋ ո͍͠Օॴ

86. 86.

    ͦ΋ͦ΋ Reconciliationͬͯʁ

87. 87.

    Reconciliation ͱ͸ • Ծ૝DOMϨϕϧͰಉ͔͡Ͳ͏͔Λൺֱͯ͠
 ࣮DOMʹcommit͢Δ͔Ͳ͏͔Λ൑ఆ • ͨͱ͑ SCU ͕ true

    ͩͱͯ͠΋
 Ծ૝DOMϨϕϧͰ౳͍͠৔߹
 commit ͞Εͳ͍
88. 88.

    Tree Reconciliation TFU4UBUF

89. 89.

    Tree Reconciliation 4$6
    USVF TFU4UBUF 4$6
    TIPVME$PNQPOFOU6QEBUF /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO

90. 90.

    Tree Reconciliation 4$6
    USVF OFX1SPQT
    ˠ OFX1SPQT
    ˠ 4$6GBMTF 4$6USVF TFU4UBUF SFOEFS 4$6
    TIPVME$PNQPOFOU6QEBUF

    /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO
91. 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. 92.

    Tree Reconciliation /P
    /FFE
    3FDPODJMJBUJPO /FFE
    3FDPODJMJBUJPO

93. 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. 94.

    ͦ΋ͦ΋ shouldComponentUpdate ͱ͸ʁ

95. 95.

    React ʹ ͓͚Δ LifeCycle • ͦ΋ͦ΋ React ʹ͸ϥΠϑαΠΫϧ͕͋Δ • shouldComponentUpdate

    ͱ͍͏ͷ͸
 ϥΠϑαΠΫϧͷ1ͭ • ੹຿͸ɺࠩ෼ϨϯμϦϯά͕ඞཁ͔Ͳ͏͔ͷ
 ൑ఆΛߦ͏͜ͱ
96. 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. 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. 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. 99.

    ࣮ࡍʹݟͯΈΔ

100. 100.

     Ͳ͏ݮΒ͔͢

101. 101.

     Tree Reconciliation 4$6
     USVF OFX1SPQT
     ˠ OFX1SPQT
     ˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQT
     ˠ OFX1SPQT
     ˠ

     SFOEFS SFOEFS 4$6USVF 4$6GBMTF ͦ΋ͦ΋໦ߏ଄
     খ͘͢͞Ε͹͍͍͡ΌΜ
102. 102.

     Reconciliation Λ΁Β͢ ̎ͭͷΞϓϩʔν • ໦ߏ଄Λখ͘͢͞Δ
 㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ


103. 103.

     Tree Reconciliation /P
     /FFE
     3FDPODJMJBUJPO /FFE
     3FDPODJMJBUJPO

104. 104.

     shouldComponentUpdate Ͱ Reconciliation ΛݮΒͤΔ

105. 105.

     Reconciliation Λ΁Β͢ ̎ͭͷΞϓϩʔν • ໦ߏ଄Λখ͘͢͞Δ
 㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ • ෆཁͳReconciliation Λ͠ͳ͍


     shouldComponentUpdate Λ ॻ͘
 㱺 falseΛฦͨ͠ͱ͔͜Βࢠ͸ݟͳ͘ͳΔ
106. 106.

     ۩ମతʹ ໦ߏ଄Λখ͘͢͞Δͱ͸ Ͳ͏͍͏͜ͱ͔

107. 107.

     ϒϥ΢βͷ
 ΢Οϯυ΢αΠζ

108. 108.

     ඳը͞Ε͍ͯΔDOMͷαΠζ ϒϥ΢βͷ
 ΢Οϯυ΢αΠζ

109. 109.

     ݟ͑ͯͳ͍෦෼ͷDOMΛඳը͢Δඞཁͳ͍!!! ͜ͷ෦෼͔͠
 ݟ͑ͳ͍

110. 110.

     ͜ΕΛ࣮ݱ͢Δͷ͕

111. 111.

     React-Virtualized

112. 112.

     React-Virtualizedͱ͸ • ڊେͳϦετ΍දΛ
 ޮ཰Α͘ඳը͢ΔͨΊͷϥΠϒϥϦ • ແݶεΫϩʔϧͱ͔Ծ૝εΫϩʔϧ͕Ͱ͖Δ • ࣮ࡍʹ΍͍ͬͯΔ͜ͱ͸ඳըൣғ֎Unmount
 εΫϩʔϧํ޲Λݟͯ௚લͰMount

113. 113.

     ͭ·Γ

114. 114.

     ͜Ε͕

115. 115.

     ͜͏ͳΔ

116. 116.

     લޙͦΕͧΕόοϑΝ͕ඞཁ ͳͥͳΒεΫϩʔϧ࣌ʹਅͬനʹͳΔ

117. 117.

     ໦ߏ଄͸খ͘͞Ͱ͖ͨ

118. 118.

     ͨͩ

119. 119.

     ·ͩ ෆཁͳ Reconciliation ͕͋Δ

120. 120.

     ෆཁͳ Reconciliation Λ͠ͳ͍

121. 121.

     ͦ΋ͦ΋ γϑτද෦෼ͷίʔυΛ ΈͯΈΔͱ

122. 122.

     3ͭͷͰ͔͍ίϯϙʔωϯτ͔Βߏ੒͞Ε͍ͯͨ

123. 123.

     Կ͕ѱ͍͔

124. 124.

     ͨͱ͑͹ ੺࿮ͷՕॴ͚ͩ ࠶ϨϯμϦϯά͍ͨ͠ͱ͢Δ

125. 125.

     shouldComponentUpdate ʹΑΔ൑ఆ͸
 ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍

126. 126.

     shouldComponentUpdate ʹΑΔ൑ఆ͸
 ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍ Ұ෦෼Λߋ৽͢ΔͨΊʹ
 શ෦Λߋ৽͢Δ͔͠ແ͍

127. 127.

     ໌Β͔ʹͳΔϘτϧωοΫ ࠩ෼ϨϯμϦϯάͷ ࢫຯ͕…

128. 128.

     Ͳ͏͢Δ͔

129. 129.

     ίϯϙʔωϯτΛখ۠͘͞੾Δ

130. 130.

     ͜ͷΞϓϩʔνͷྑ͍ͱ͜Ζ

131. 131.

     ͜ͷΞϓϩʔνͷڧΈ • ٕज़తʹ೉͍͠ཁૉ͕͘͢ͳ͍
 ˠ ΊΜͲ͍͚ͩ͘͞ • shouldComponentUpdate ͸࠷ॳ͔Β
 ॻ͔ͳͯ͘΋ྑ͍
 →

     ॏ͘ͳΕ͹ॻ͚͹͍͍ • ίϯϙʔωϯτ͕খ͍͞ͱ props ͕গͳ͍
 → SCU Λॻ͔ͳͯ͘΋ React.memo ͳͲ͕࢖͑Δ
132. 132.

     Fat ͳ Component ͸ ઈରμϝ

133. 133.

     ผΕ͍ͯΔ͚ͩͰ ྑ͍఺͕ͨ͘͞Μ͋Δ͠ ࢪࡦ΋ଧͪ΍͍͢

134. 134.

     Before / After

135. 135.

     Before After 4ഒ௿଎؀ڥͰ 374% վળɺ10ඵ΄ͲεϐʔυΞοϓ

136. 136.

     վળޙ γϑτද
     ૣ͘ͳΓ·ͨ͠Ͷʂ
     ͋Γ͕ͱ͏͍͟͝·͢ʂ Αͬ͠Ό

137. 137.

     ͱ͸͍͑ • 3.6sec ͸଎͍ͱ͸ݴ͑ͳ͍ • ΍Γ࢒ͨ͠վળ΋͋Δ • Reducer Λ͖ͪΜͱ
 ઃܭ͠ͳ͓ͤ͹


     ແବͳߋ৽͕఻ୡ͞Εͳ͍
138. 138.

     ·ͱΊ

139. 139.

     ਪଌ͢Δͳ ܭଌͤΑ

140. 140.

     ਪଌ͢ΔͳܭଌͤΑ • ͱΓ͋͑ͣͷܭଌ͸ݪҼͷ૚෼͚ʹա͗ͳ͍ • צͰࢼͯ͠΋͏·͍͔͘ͳ͍ • େࣄͳͷ͸ਅҼΛݟ͚ͭΔ·Ͱܭଌ͢Δ͜ͱ • Chrome Dev

     Tools / React Dev Tools
 ͕ܭଌ͢Δ্Ͱศར
141. 141.

     ͦ΋ͦ΋ͳͥ ώΞϦϯά·Ͱ ൃ֮͠ͳ͔͔ͬͨ

142. 142.

     ސ٬ͷPC͸ CPUͷॲཧೳྗ͕௿͔ͬͨ ։ൃ؀ڥͰ͸໰୊ͳ͔ͬͨ

143. 143.

     ސ٬ͷ؀ڥͰ
 ύϑΥʔϚϯε͸
 ܭଌ͠ͳ͚Ε͹ͳΒͳ͍

144. 144.

     ސ٬ͱಉ౳ͷ؀ڥͰ ύϑΥʔϚϯεΛௐ΂Δ • Fast 3G ճઢͰಈ͔͢ • x4 εϩοτϧ؀ڥͰಈ͔͢

145. 145.

     ̍࣍։ൃ࣌఺Ͱ͸ ௿଎ঢ়ଶͰͷ ύϑΥʔϚϯε֬ೝ΋ ͍ͯͨ͠

146. 146.

     ͦΕͰ΋ൃݟ͕஗Εͨͷ͸ ఆظతͳύϑΥʔϚϯεଌఆΛ ߦ͍ͬͯͳ͔͔ͬͨΒ

147. 147.

     ఆظతͳύϑΥʔϚϯεଌఆͷॏཁੑ • ύϑΥʔϚϯε͸ػೳ௥Ճͱͱ΋ʹ
 ͲΜͲΜྼԽ͍ͯ͘͠ • ύϑΥʔϚϯεΛܧଓతɼఆظతʹݟ͍͖ͯ
 ಈ޲Λৗʹܭଌ͓ͯ͘͜͠ͱ͕େࣄ ͜Ε͕ͦ͜श׳ԽͰ͋Γɺ
     ύϑΥʔϚϯεଌఆΛߦ͏จԽͰ͋Δ

148. 148.

     ࠓޙͷ՝୊

149. 149.

     ύϑΥʔϚϯε͸
 վળͯ͠ऴΘΓͰ͸ͳ͍ ։ൃνʔϜʹश׳Խ
 ͤ͞Δ͜ͱ͕େ੾

150. 150.

     ࠓޙͷ՝୊ • ͜ͷվળʹͱͲ·ΒͣνʔϜશମʹ
 ύϑΥʔϚϯεΛ؍ଌ͢ΔจԽΛࠜ෇͚Δ • ແବͳॲཧΛߦΘͳ͍վળʹνϟϨϯδ
 㱺 reducer ͷઃܭΛશ໘తʹݟ௚ͯ͠
 ແବͳ఻ୡΛͳ͘͢

     • ઌಡΈʹΑΔσʔλͷઌߦऔಘʹνϟϨϯδ
151. 151.

     ;Ζ͘

152. 152.

     ָʹ shouldComponbentUpdate Λ ࣮૷͍ͨ͠

153. 153.

     ָʹSCUΛ ࣮૷͢ΔͨΊͷϥΠϒϥϦ • PureComponent • recompose/pure • React.memo • ͳͲ…

154. 154.

     ԿΛͯ͘͠ΕΔ͔

155. 155.

     ԿΛͯ͘͠ΕΔ͔ • جຊతʹ͢΂ͯ fbjs/shallowEqual ͯ͘͠ΕΔ • React.memo ͸ $$type Λॻ͖׵͑ͯ


     ಺෦ͷ updater ͷϩδοΫΛࠩ͠ସ͑ͯΔ
 㱺 SCU ʹ shallowEqual ͕ೖΔͱࢥͬͯྑ͍
156. 156.

     ͰɺͲΕ͕ྑ͍ͷʁ

157. 157.

     ܭଌͯ͠Έͨ

158. 158.

     None
159. 159.

     ԣ࣠͸ prev === next ͷ֬཰ ॎ࣠͸ ࣌ؒ (ms)

160. 160.

     None
161. 161.

     None
162. 162.

     ·ͱΊ • recompose/pure ͸ class Ͱ΋ ؔ਺ Ͱ΋
 ࢖͑Δ •

     React.memo ͸ؔ਺༻ • PureComponent ͸ Ϋϥε༻ • React.memo ͸ ΦϓγϣϯͰνϡʔχϯάͰ͖Δ
163. 163.

     connect ୈ̐Ҿ਺

164. 164.

     connect() // version5 connect( [mapStateToProps], [mapDispatchToProps], [mergeProps], [options] ): (React.Component<*>)

     => Recat.Component<*> ࣮͸4ͭ໨ͷҾ਺͕͋Δ
165. 165.

     Options { pure = ture, areStatesEqual = (a, b) =>

     a === b, areOwnPropsEqual = shallowEqual, areStatePropsEqual = shallowEqual, areMergedPropsEqual = shallowEqual, storeKey = ‘store’, } HoC ࣗମͷ࠶ϨϯμϦϯάͷ੍ޚ͕Ͱ͖Δ
166. 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. 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. 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. 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. 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. 171.

     connect ·ͱΊ • HoCͰ࣮૷͞Ε͍ͯΔ • Connect ͷ areStateEqual ͕ false

     Λฦͤ͹
 ࢠίϯϙʔωϯτͷ࠶ϨϯμϦϯάͳ͠ • ୈ4Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ