Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kento TSUJI
November 23, 2018

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

Kento TSUJI

November 23, 2018
Tweet

More Decks by Kento TSUJI

Other Decks in Technology

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