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

Reactは、はやい!

77cfc2b7480efefed1e20a9fd1f25275?s=47 Risa Aoki
March 25, 2017

 Reactは、はやい!

Reactの表示速度が早いことについてLTしたときの資料です

77cfc2b7480efefed1e20a9fd1f25275?s=128

Risa Aoki

March 25, 2017
Tweet

Transcript

  1. React͸ɺ͸΍͍ʂ Aoki Risa 2017.3.25

  2. Reactͱ͸ʁ

  3. දࣔʹಛԽͨ͠JSϥΠϒϥϦ • webϖʔδͳͲͰࢲ͕࣮ͨͪࡍʹݟ͍ͯΔը ໘ͷදࣔʹಛԽ • ྫ͑͹Facebookͷը໘͸React͕࢖ΘΕ͍ͯ Δ୅දྫ

  4. React͕͸΍͍ͱ͸ʁ

  5. ։ൃεϐʔυ͕͸΍͍ʁ

  6. ૸Δͷ͕͸΍͍ʁ

  7. ද͕ࣔ͸΍͍ʂʂ

  8. Ͳ͏ͯ͠͸΍͍ͷʁ

  9. DOM • ϒϥ΢βͰϖʔδΛݟΔ࣌جຊతʹͭ͘ΒΕΔ • ͜ΕΛ΋ͱʹඳը • ͜ΕΛͭ͘Δ͜ͱͰJavaScript͔ΒHTMLͷλάΛ͍͡Δ͜ͱ͕ Ͱ͖Δ https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#DOM

  10. ࠓ·Ͱ͸… • جຊతʹɺड͚औͬͨ৘ใΛݩʹຖճDOMΛ ͍͔ͪΒ࡞੒ͯ͠ϒϥ΢βʹඳըΛߦ͏͜ͱ ͕ଟ͔ͬͨ 表示させなきゃ DOM ৘ใ ͓͍ͦʂ DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ

  11. ReactͰ͸... • ৘ใΛड͚औͬͯ΋͍͖ͳΓDOMΛͭ͘Βͳ͍ • ·ͣԾ૝DOMΛ࡞੒
 ˠԾ૝DOMͷ಺༰ΛݩʹDOMΛ࡞੒
 ˠϒϥ΢βʹඳը 表示させなきゃ DOM ॳظ৘ใ

    Ծ૝ DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ
  12. Ծ૝DOM • ࣮ࡍͷDOMͱରʹͳΔɺԾͷDOM • DOMΑΓ΋͸΍͘࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ
 w w w ઃܭ͞Ε͍ͯΔ •

    ͜Ε͸৽͍͠৘ใ͕ೖ͖ͬͯͨͱ͖ʹେ͖ͳ ໾ׂΛՌͨ͢ʂ
  13. ৽͍͠৘ใ͕ೖ͖ͬͯͨͱ͖ • ৽͍͠৘ใΛ΋ͱʹ৽͍͠Ծ૝DOMΛ͍͔ͪΒ࡞Δ
 ˠҰݸલͷԾ૝DOMͱ৽͍͠΋ͷΛൺֱͯ͠มߋ෼ΛΈΔ
 ˠมߋ͞Εͨͱ͜Ζ͚ͩDOMΛ࠶ߏங͢Δɹ
 ৽͍͠ Ծ૝ DOM ݹ͍ Ծ૝

    DOM DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ ͸΍͍ʂ ͸΍͍ʂ
  14. ൺ΂ͯΈΔͱ… DOM ৽͍͠ ৘ใ ैདྷ React ৽͍͠ ৘ใ ৽͍͠ Ծ૝

    DOM DOM ൺֱͯ͠ ࠩ෼͚ͩ ࠶ߏங
  15. ·ͱΊ Ծ૝DOMͷ͓͔͛Ͱɺ ReactΛ͔ͭ͑͹ૣ͘දࣔͰ͖Δʂ

  16. ࢀߟʹͨ͠จݙɾαΠτ https://www.to-r.net/media/react-tutorial01/ https://techacademy.jp/magazine/5638 https://app.codegrid.net/entry/react-1#toc-2 http://blog.livedoor.jp/yo_miz/archives/53540189.html https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ #DOM ʰWebσϕϩούʔͷͨΊͷReact։ൃೖ໳ JavaScript UIϥΠϒϥϦͷجຊͱ׆༻ʱ

    ࣲాจ඙ஶ
  17. ͋Γ͕ͱ͏͍͟͝·ͨ͠