Reactは、はやい！

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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠