VirtualDOMをお勉強しました-React.jsチュートリアル所感-

 VirtualDOMをお勉強しました-React.jsチュートリアル所感-

Eab7d4b36a98bc9e0cd00e69e8fc57e9?s=128

betachelsea

January 12, 2015
Tweet

Transcript

  1. LOUPE Study#14 2015/01/06 @beta_chelsea VirtualDOMΛ ͓ษڧ͠·ͨ͠
 - React.js νϡʔτϦΞϧॴײ -

    ← webॻಓ.com ΑΓ
  2. #ͱ͸

  3. ͬ͞ͺΓ஌Βͳ͔ͬͨͷͰ θϩ͔Βษڧ

  4. ࠷ۙ࿩୊ͷ

  5. ͬ͘͟ΓಡΜͩ݁Ռͷ ͓΅Ζ͛ͳཧղ

  6. VirtualDOM͸֓೦ʢํ๏࿦ʣ • DOMΛ௚઀ૢ࡞ͤͣɺDOMΛදݱ͢ΔjsΦϒδΣΫτΛ ৮ͬͯมߋΛ؅ཧ͠Α͏ͱ͍͏ํ๏ • ಺෦Ͱ͸มߋલޙͷdiffΛॲཧ͢Δ͜ͱͰܰಈ࡞Λ࣮ݱ • ৗʹθϩ͔Βॻ͖௚͢Α͏ʹॻ͘͜ͱ͕Ͱ͖Δ • Կ൪໨ͷཁૉʹ<li>Λૠೖ͢Δͱ͔Λߟ͑ͳͯ͘Α͍

    • ↑ͦΕ͸VirtualDOMͷ࣮૷͕΍ͬͯ͘ΕΔ • jQueryͷ$(“#hoge”).append(“<p>΄͛</p>”);
 ͸΋͏΍ΊΑ͏ͱ͍͏ํ਑ͬΆ͍΋ͷΛײ͡Δ
  7. ࣮૷ࣗମ͸ઓࠃ࣌୅ͬΆ͍ • facebook/react • Matt-Esch/virtual-dom • segmentio/deku • VirtualDOMʹదͨ͠Fluxͱ͍͏ߏ੒ͱ͔ʢ͜Ε΋֓೦ʣ •

    etc…
  8. ͱΓ͋͑ͣ௕͍Ϟϊʹ͸ר͔ΕΖਫ਼ਆͰ ࠓҰ൪ࢿྉ͕ଟͦ͏ͳ facebook/react ΛݟͯΈΑ͏

  9. 2015೥ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ

  10. 2015೥ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ

  11. ࣸܦ݁Ռ

  12. ࣸܦ͔Βಘͨཧղ

  13. ྫ୊ɿ 3000ϛϦඵޙʹ ʮϛϧΫʯΛʮڇೕʯʹม׵͠ͳ͍͞

  14. ΨνjQueryʢੜDOMΛ৮Δํ๏ʣͩͱ ※ίʔυ͸݁ߏద౰Ͱ͢

  15. VirtualDOMͷߟ͑ํͩͱ ※ίʔυ͸݁ߏద౰Ͱ͢

  16. VirtualDOMͷϝϦοτ DOMૢ࡞ΛΑΓগͳ͘͢ΔͨΊʹ೰·ͳͯ͘Α͍ શσʔλΛͿͪ͜Ί͹উखʹൺֱɾमਖ਼Λ΍ͬͯ͘ΕΔ ͋ͱ଎͍Β͍͠ʢখ͍͞σʔλ͡ΌΘ͔ΒΜʣ VirtualDOMͷσϝϦοτ DOMૢ࡞લఏͷطଘϥΠϒϥϦͱ૬ੑ͕ѱ͍ VirtualDOM࣮૷͕೺Ѳ͍ͯ͠ͳ͍ͱ͜Ζ͔Βԣ΍Γ͕ ೖΔͱ੔߹ੑ͔औΕͳ͘ͳͬͯ͠·͏

  17. ͜Ε͔Β Ͳ͏ͳΔ

  18. None
  19. 2015೥ɺ஫໨ͯ͠Έ·͠ΐ͏ʂ ͓͠·͍