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

nodefest@2018.11.23
html5j@2018.11.25

Transcript

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

   Recruit Technologies Co., Ltd.
   

   View Slide

2. ࣗݾ঺հ
   • Github: @maxmellon
   • Twitter: @maxmellon_9039
   • ϦΫϧʔτςΫϊϩδʔζ 18೥ ৽ଔೖࣾ

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

   View Slide

3. maxmellon/vim-jsx-pretty 157 ⭐
   

   View Slide

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

   View Slide

5. ͬͦ͘͞Ͱ͕͢
   

   View Slide

6. SPAʹԿΛٻΊ·͔͢ʁ
   

   View Slide

7. ྫ͑͹
   

   View Slide

8. ͵Δͬͱ
   

   View Slide

9. ͬ͘͘͞͞ͱ
   

   View Slide

10. ௚ײతʹ
    

    View Slide

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

    View Slide

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

    View Slide

13. ύϑΥʔϚϯε
    

    View Slide

14. Ϧονͳදݱྗ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ

    ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ

    

    View Slide

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

    ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ

    ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ

    ॏཁͰ͕͢ɺࠓ೔͸͜ͷ࿩͸͠·ͤΜ
    

    View Slide

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

    View Slide

21. ϦΫϧʔτʹ͓͚ΔSPA
    • AirSHIFTͱ͍͏αʔϏε͕͋Δ
    • γϑτද͕௚ײతʹ࡞ΕΔ
    • React / Redux + BFF (redux-pluto)
    • Component ਺ ໿600 ݸͱ͍͏େن໛ͳSPA
    • ௚ײతʹγϑτΛ࡞੒͢ΔͨΊʹ

    υϥοάΞϯυυϩοϓΛ࠾༻
    

    View Slide

22. AirSHIFT ͱ͸
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. • γϑτදͷ࡞੒Λ࢝Ίͱͨ͠ళ௕ۀ຿ͷ

    αϙʔτ
    • ௚ײతʹૢ࡞Ͱ͖ΔΑ͏ʹ

    υϥοάΞϯυυϩοϓͳͲͷૢ࡞͕͋Δ
    • γϑτදͷ੾Γସ͑ʹ

    ͕͔͔͍࣌ؒͬͯΔ໰୊͕͋ͬͨ
    AirSHIFT ͱ͸
    

    View Slide

27. BFF
    Client API
    Isomorphic
    Session Data
    Notification

    Server
    Redis
    FCM wrapper
    React/Redux
    Fetchr
    CSR SSR
    DB
    Push

    Notification
    WebSocket
    OAuth
    γϑτ

    Ϙʔυ

    ʢ࿈ܞΞϓϦʣ
    ΞʔΩςΫνϟ
    

    View Slide

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

    View Slide

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

    View Slide

30. ͋Δ೔
    "JS4)*'5ར༻͍ͯ͠ΔͷͰ͕͢
    Ξοϓσʔτ͕͔͋ͬͯΒ
    ͘͢͝ॏ͍ΜͰ͢ΑͶʜ
    Ͳ͏ʹ͔ͯ͠

    ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ
    ͳΔ΄Ͳʜ
    ࣗ෼ͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ
    

    View Slide

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

    View Slide

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

    View Slide

33. ࠷ॳͷࢪࡦ
    • શ෦·ͱΊͯίϯϙʔωϯτͷ

    ࠶ϨϯμϦϯάΛݮΒͦ͏ͱͨ͠
    • εΫϦϓτͷ࣮ߦ͕஗͍͔ΒϘτϧωοΫ͸

    redux·ΘΓʹܾ·͍ͬͯΔͩΖ͏
    ͜͜ͰͳΜͱ͔͢Ε͹࠶ϨϯμϦϯάΛ

    ݮΒͤΔͷͰ͸ʁ
    

    View Slide

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

    View Slide

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

    View Slide

36. connect
    3PPU $PNQPOFOU"
    DPOOFDU $PNQPOFOU"
    
    

    View Slide

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

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

    View Slide

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

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

    \

    TUBUF 

    BOZ0CKFDU 

    ^

    ͯ͠Δ
    

    View Slide

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

    \

    TUBUF 

    BOZ0CKFDU 

    ^

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

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

    View Slide

40. …͕ μϝ
    

    View Slide

41. ਪଌ͢Δͳ
    ܭଌͤΑ
    

    View Slide

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

    View Slide

43. ഊҼ
    • ௐ͕ࠪ؁͍
    • ਅҼΛಛఆ͢Δ·Ͱͷܭଌ͕

    Ͱ͖͍ͯͳ͔ͬͨ
    • Connect શ෦ࠩ͠ସ͑ͨͷ͕μϝͩͬͨ

    O(N^2) ͳͷͰൺֱࣗମ͕ॏ͍
    

    View Slide

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

    View Slide

45. Dev Tools Λ
    పఈతʹ࢖͍౗͢
    

    View Slide

46. Performance Profiler
    

    View Slide

47. React Dev Tools
    (Highlight Update)
    

    View Slide

48. React Dev Tools
    (Profiler)
    

    View Slide

49. Network Timing
    

    View Slide

50. User Timing
    

    View Slide

51. What is the User Timing API ?
    

    View Slide

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

    > require(‘perf_hooks’).performance
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. performance.mark(‘A’)
    doSomeThing()
    performance.mark(‘B’)
    preformance.mesure(‘A-B’, ‘A’, ‘B’)
    ࢖͍ํ
    • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
    • ܭଌ͍ͨ͠લޙͰ mark()
    • measure(, , ) Ͱܭଌ
    ͜ͷίʔυΛ௥هͯ͠
    %FW5PPMTͰ
    ύϑΥʔϚϯεΛܭଌ͢Δ
    

    View Slide

57. View Slide

58. React 16 ͔Β User Timing API͕ఏڙ
    • React 16 ͔ΒUser Timing API ͕ར༻͞Εͨ
    • ։ൃ؀ڥͰ͸ DevTools ͰݟΔ͚ͩͰ OK
    • React ͕ ΠΠΧϯδʹ

    `performance.mark, measure` ͯ͘͠Ε͍ͯΔ
    

    View Slide

59. View Slide

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

    View Slide

61. ՝୊
    • Ϣʔβʔͷૢ࡞ ͱ Component ͷ

    ϨϯμϦϯάͷؔ܎ੑ͕Θ͔Βͳ͍
    • Կ͕͖͔͚ͬʹ

    ࠶ϨϯμϦϯά͞Ε͍ͯΔ͔͕Θ͔Βͳ͍
    Ͳͷૢ࡞͕ॏ͍ͷ͔͔ͬ͠Γ੾Γ෼͚͍ͨ
    

    View Slide

62. redux-action-timing-middleware
    

    View Slide

63. maxmellon/redux-action-timing-middleware
    

    View Slide

64. Ͱ͖Δ͜ͱ
    • ΞΫγϣϯͱComponentͷϨϯμϦϯάͷ

    ؔ܎͕ௐ΂ΕΔ
    • ྫ͑͹ LOCATION/CHANGE ͳͲͰ

    શؔ͘܎ແ͍ίϯϙʔωϯτ͕Ξοϓσʔτ

    ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
    

    View Slide

65. redux-action-timing-middleware ͕஫ೖͨ͠

    UserTiming ͸ ֆจࣈQSFpY
    

    View Slide

66. γϑτදͷ σʔλͷऔಘ੒ޭ ͱ͍͏ΞΫγϣϯͰ

    ൃੜͨ͠࠶ϨϯμϦϯά
    

    View Slide

67. ϩʔσΟϯάΠϯδέʔλʔ࡟আʹΑͬͯ

    ൃੜͨ͠࠶ϨϯμϦϯά
    

    View Slide

68. • Redux ͷΞΫγϣϯ͸

    Ϣʔβʔͷૢ࡞ͱඥ෇͍͍ͯΔ

    ex. handleClick

    ex. handleInput
    • Α͔ͬͨΒελʔ͍ͩ͘͞ʂʂʂʂ
    Ͳͷૢ࡞ͰԿ͕ϨϯμϦϯά͞Ε͔͕ͨΘ͔Δ
    ಋೖޙ
    

    View Slide

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

    View Slide

70. ॲཧ࣌ؒΛ΁Β͢
    

    View Slide

71. ॲཧ࣌ؒΛ΁Β͢
    

    View Slide

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

    View Slide

73. ॲཧ࣌ؒΛݮΒ͢
    • ؔ਺ͷॲཧ࣌ؒΛ୹͘͢Δ
    • ແବͳ࠶ܭࢉΛϝϞԽ͢Δ

    ϥΠϒϥϦͩͱ reselect, memoize ͳͲ….
    • ແବͳϧʔϓΛ஍ಓʹ௵͢
    

    View Slide

74. ແବͳॲཧΛ͠ͳ͍
    

    View Slide

75. ແବͳॲཧΛ͠ͳ͍
    

    View Slide

76. ແବͳॲཧΛ͠ͳ͍
    

    View Slide

77. • ݺͿඞཁͷͳ͍ؔ਺Λݺ͹ͳ͍Α͏ʹ͢Δ
    • React/Redux ʹ͓͍ͯ͸ 

    reducer Ͱແବʹ৽͍͠stateΛฦ͞ͳ͍
    • ઃܭϨϕϧͷݟ௚͕͠ඞཁͳέʔε͕ଟ͍
    ແବͳॲཧΛ͠ͳ͍
    

    View Slide

78. ͜ΕΒΛ౿·͑ͯ
    ௐࠪ
    

    View Slide

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

    View Slide

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

    View Slide

81. ո͍͠Օॴ
    ͜Ε΋
    

    View Slide

82. ͜Ε΋
    ո͍͠Օॴ
    

    View Slide

83. ͜Ε΋
    ո͍͠Օॴ
    

    View Slide

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

    View Slide

85. ͜Ε΋
    ո͍͠Օॴ
    

    View Slide

86. ͦ΋ͦ΋
    Reconciliationͬͯʁ
    

    View Slide

87. Reconciliation ͱ͸
    • Ծ૝DOMϨϕϧͰಉ͔͡Ͳ͏͔Λൺֱͯ͠

    ࣮DOMʹcommit͢Δ͔Ͳ͏͔Λ൑ఆ
    • ͨͱ͑ SCU ͕ true ͩͱͯ͠΋

    Ծ૝DOMϨϕϧͰ౳͍͠৔߹

    commit ͞Εͳ͍
    

    View Slide

88. Tree Reconciliation
    TFU4UBUF
    
    

    View Slide

89. Tree Reconciliation
    4$6USVF
    TFU4UBUF
    
    4$6TIPVME$PNQPOFOU6QEBUF
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    

    View Slide

90. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF
    
    SFOEFS
    
    4$6TIPVME$PNQPOFOU6QEBUF
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    

    View Slide

91. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF
    
    OFX1SPQTˠ
    OFX1SPQTˠ
    SFOEFS
    SFOEFS
    
    4$6USVF
    4$6GBMTF
    ྘ͷՕॴ͸

    3FDPODJMJBUJPO͕

    ൃੜ͢Δ
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    4$6TIPVME$PNQPOFOU6QEBUF
    

    View Slide

92. Tree Reconciliation
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    

    View Slide

93. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF
    
    OFX1SPQTˠ
    OFX1SPQTˠ
    SFOEFS
    SFOEFS
    
    4$6USVF
    4$6GBMTF
    ྘ͷՕॴ͸

    3FDPODJMJBUJPO͕

    ൃੜ͢Δ
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    4$6TIPVME$PNQPOFOU6QEBUF
    

    View Slide

94. ͦ΋ͦ΋
    shouldComponentUpdate
    ͱ͸ʁ
    

    View Slide

95. React ʹ ͓͚Δ LifeCycle
    • ͦ΋ͦ΋ React ʹ͸ϥΠϑαΠΫϧ͕͋Δ
    • shouldComponentUpdate ͱ͍͏ͷ͸

    ϥΠϑαΠΫϧͷ1ͭ
    • ੹຿͸ɺࠩ෼ϨϯμϦϯά͕ඞཁ͔Ͳ͏͔ͷ

    ൑ఆΛߦ͏͜ͱ
    

    View Slide

96. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    HFU%SJWFE4UBUF'SPN1SPQT
    HFU4OBQTIPU#FGPSF6QEBUF
    

    View Slide

97. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    ͍͕ͭ͜USVFΛ

    ฦͨ͠ͱ͖ͷΈ

    ࠶ϨϯμϦϯά
    HFU%SJWFE4UBUF'SPN1SPQT
    HFU4OBQTIPU#FGPSF6QEBUF
    

    View Slide

98. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    ͍͕ͭ͜USVFΛ

    ฦͨ͠ͱ͖ͷΈ

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

    ৗʹ5SVFΛฦ٫
    

    View Slide

99. ࣮ࡍʹݟͯΈΔ
    

    View Slide

100. Ͳ͏ݮΒ͔͢
     

     View Slide

101. Tree Reconciliation
     4$6USVF
     OFX1SPQTˠ
     OFX1SPQTˠ
     4$6GBMTF
     4$6USVF
     TFU4UBUF
     
     OFX1SPQTˠ
     OFX1SPQTˠ
     SFOEFS
     SFOEFS
     
     4$6USVF
     4$6GBMTF
     ͦ΋ͦ΋໦ߏ଄
     খ͘͢͞Ε͹͍͍͡ΌΜ
     

     View Slide

102. Reconciliation Λ΁Β͢
     ̎ͭͷΞϓϩʔν
     • ໦ߏ଄Λখ͘͢͞Δ

     㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ

     

     View Slide

103. Tree Reconciliation
     /P/FFE3FDPODJMJBUJPO
     /FFE3FDPODJMJBUJPO
     

     View Slide

104. shouldComponentUpdate Ͱ
     Reconciliation ΛݮΒͤΔ
     

     View Slide

105. Reconciliation Λ΁Β͢
     ̎ͭͷΞϓϩʔν
     • ໦ߏ଄Λখ͘͢͞Δ

     㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ
     • ෆཁͳReconciliation Λ͠ͳ͍

     shouldComponentUpdate Λ ॻ͘

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

     View Slide

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

     View Slide

107. ϒϥ΢βͷ

     ΢Οϯυ΢αΠζ
     

     View Slide

108. ඳը͞Ε͍ͯΔDOMͷαΠζ
     ϒϥ΢βͷ

     ΢Οϯυ΢αΠζ
     

     View Slide

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

     ݟ͑ͳ͍
     

     View Slide

110. ͜ΕΛ࣮ݱ͢Δͷ͕
     

     View Slide

111. React-Virtualized
     

     View Slide

112. React-Virtualizedͱ͸
     • ڊେͳϦετ΍දΛ

     ޮ཰Α͘ඳը͢ΔͨΊͷϥΠϒϥϦ
     • ແݶεΫϩʔϧͱ͔Ծ૝εΫϩʔϧ͕Ͱ͖Δ
     • ࣮ࡍʹ΍͍ͬͯΔ͜ͱ͸ඳըൣғ֎Unmount

     εΫϩʔϧํ޲Λݟͯ௚લͰMount
     

     View Slide

113. ͭ·Γ
     

     View Slide

114. ͜Ε͕
     

     View Slide

115. ͜͏ͳΔ
     

     View Slide

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

     View Slide

117. ໦ߏ଄͸খ͘͞Ͱ͖ͨ
     

     View Slide

118. ͨͩ
     

     View Slide

119. ·ͩ ෆཁͳ
     Reconciliation ͕͋Δ
     

     View Slide

120. ෆཁͳ
     Reconciliation Λ͠ͳ͍
     

     View Slide

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

     View Slide

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

     View Slide

123. Կ͕ѱ͍͔
     

     View Slide

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

     View Slide

125. shouldComponentUpdate ʹΑΔ൑ఆ͸

     ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍
     

     View Slide

126. shouldComponentUpdate ʹΑΔ൑ఆ͸

     ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍
     Ұ෦෼Λߋ৽͢ΔͨΊʹ

     શ෦Λߋ৽͢Δ͔͠ແ͍
     

     View Slide

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

     View Slide

128. Ͳ͏͢Δ͔
     

     View Slide

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

     View Slide

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

     View Slide

131. ͜ͷΞϓϩʔνͷڧΈ
     • ٕज़తʹ೉͍͠ཁૉ͕͘͢ͳ͍

     ˠ ΊΜͲ͍͚ͩ͘͞
     • shouldComponentUpdate ͸࠷ॳ͔Β

     ॻ͔ͳͯ͘΋ྑ͍

     → ॏ͘ͳΕ͹ॻ͚͹͍͍
     • ίϯϙʔωϯτ͕খ͍͞ͱ props ͕গͳ͍

     → SCU Λॻ͔ͳͯ͘΋ React.memo ͳͲ͕࢖͑Δ
     

     View Slide

132. Fat ͳ
     Component ͸
     ઈରμϝ
     

     View Slide

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

     View Slide

134. Before / After
     

     View Slide

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

     View Slide

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

     View Slide

137. ͱ͸͍͑
     • 3.6sec ͸଎͍ͱ͸ݴ͑ͳ͍
     • ΍Γ࢒ͨ͠վળ΋͋Δ
     • Reducer Λ͖ͪΜͱ

     ઃܭ͠ͳ͓ͤ͹

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

     View Slide

138. ·ͱΊ
     

     View Slide

139. ਪଌ͢Δͳ
     ܭଌͤΑ
     

     View Slide

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

     ͕ܭଌ͢Δ্Ͱศར
     

     View Slide

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

     View Slide

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

     View Slide

143. ސ٬ͷ؀ڥͰ

     ύϑΥʔϚϯε͸

     ܭଌ͠ͳ͚Ε͹ͳΒͳ͍
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

147. ఆظతͳύϑΥʔϚϯεଌఆͷॏཁੑ
     • ύϑΥʔϚϯε͸ػೳ௥Ճͱͱ΋ʹ

     ͲΜͲΜྼԽ͍ͯ͘͠
     • ύϑΥʔϚϯεΛܧଓతɼఆظతʹݟ͍͖ͯ

     ಈ޲Λৗʹܭଌ͓ͯ͘͜͠ͱ͕େࣄ
     ͜Ε͕ͦ͜श׳ԽͰ͋Γɺ
     ύϑΥʔϚϯεଌఆΛߦ͏จԽͰ͋Δ
     

     View Slide

148. ࠓޙͷ՝୊
     

     View Slide

149. ύϑΥʔϚϯε͸

     վળͯ͠ऴΘΓͰ͸ͳ͍
     ։ൃνʔϜʹश׳Խ

     ͤ͞Δ͜ͱ͕େ੾
     

     View Slide

150. ࠓޙͷ՝୊
     • ͜ͷվળʹͱͲ·ΒͣνʔϜશମʹ

     ύϑΥʔϚϯεΛ؍ଌ͢ΔจԽΛࠜ෇͚Δ
     • ແବͳॲཧΛߦΘͳ͍վળʹνϟϨϯδ

     㱺 reducer ͷઃܭΛશ໘తʹݟ௚ͯ͠

     ແବͳ఻ୡΛͳ͘͢
     • ઌಡΈʹΑΔσʔλͷઌߦऔಘʹνϟϨϯδ
     

     View Slide

151. ;Ζ͘
     

     View Slide

152. ָʹ
     shouldComponbentUpdate Λ
     ࣮૷͍ͨ͠
     

     View Slide

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

     View Slide

154. ԿΛͯ͘͠ΕΔ͔
     

     View Slide

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

     ಺෦ͷ updater ͷϩδοΫΛࠩ͠ସ͑ͯΔ

     㱺 SCU ʹ shallowEqual ͕ೖΔͱࢥͬͯྑ͍
     

     View Slide

156. ͰɺͲΕ͕ྑ͍ͷʁ
     

     View Slide

157. ܭଌͯ͠Έͨ
     

     View Slide

158. View Slide

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

     View Slide

160. View Slide

161. View Slide

162. ·ͱΊ
     • recompose/pure ͸ class Ͱ΋ ؔ਺ Ͱ΋

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

     View Slide

163. connect ୈ̐Ҿ਺
     

     View Slide

164. connect() // version5
     connect(
     [mapStateToProps],
     [mapDispatchToProps],
     [mergeProps],
     [options]
     ): (React.Component<*>) => Recat.Component<*>
     ࣮͸4ͭ໨ͷҾ਺͕͋Δ
     

     View Slide

165. Options
     {
     pure = ture,
     areStatesEqual = (a, b) => a === b,
     areOwnPropsEqual = shallowEqual,
     areStatePropsEqual = shallowEqual,
     areMergedPropsEqual = shallowEqual,
     storeKey = ‘store’,
     }
     HoC ࣗମͷ࠶ϨϯμϦϯάͷ੍ޚ͕Ͱ͖Δ
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

169. connect() // version5
     connect
     areStateEqual(prev, next)
     next = mapStateToProps(prev, next)
     prev = next // memoized once
     ୈ̐Ҿ਺ͰΦʔόϥΠυͰ͖Δ
     QSFW4UBUF OFYU4UBUF
     CPPMFBO
     Update Childe Component
     // return true 

     in shouldComponentUpdate of HoC
     Store
     Component
     

     View Slide

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
     લճͷ݁ՌΛอ͓࣋ͯ͘͠
     

     View Slide

171. connect ·ͱΊ
     • HoCͰ࣮૷͞Ε͍ͯΔ
     • Connect ͷ areStateEqual ͕ false Λฦͤ͹

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

     View Slide