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

E8dde3bdd21542507a606a60a2101e66?s=47 Kento TSUJI
November 23, 2018

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

E8dde3bdd21542507a606a60a2101e66?s=128

Kento TSUJI

November 23, 2018
Tweet

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>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠ %FW5PPMTͰ ύϑΥʔϚϯεΛܭଌ͢Δ
  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$6USVF TFU4UBUF 4$6TIPVME$PNQPOFOU6QEBUF /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO

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

    /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO
  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
  92. Tree Reconciliation /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO

  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
  94. ͦ΋ͦ΋ shouldComponentUpdate ͱ͸ʁ

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

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

  100. Ͳ͏ݮΒ͔͢

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

    SFOEFS SFOEFS 4$6USVF 4$6GBMTF ͦ΋ͦ΋໦ߏ଄ খ͘͢͞Ε͹͍͍͡ΌΜ
  102. Reconciliation Λ΁Β͢ ̎ͭͷΞϓϩʔν • ໦ߏ଄Λখ͘͢͞Δ
 㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ


  103. Tree Reconciliation /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO

  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 ୈ̐Ҿ਺ͰΦʔόϥΠυͰ͖Δ  QSFW4UBUF OFYU4UBUF 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Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ