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

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 ͱ͸

23. None
24. None
25. None

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
    Ͱ
    ύϑΥʔϚϯεΛܭଌ͢Δ
57. None

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

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

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. ܭଌͯ͠Έͨ

158. None

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

160. None
161. None

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Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ