Reactjs外でのDOM操作

shinosakarb #24

Transcript

1. ېسɿReactjs֎ͰͷDOMૢ࡞ 2016.08.20 @rito https://github.com/chimame/20160820_lt
2. ࣗݾ঺հ <Self name="rito" profile="Web engineer" reactjs="1.month" />
3. –Lezard VALETHɹϨβʔυɾϰΝϨε “ېسΛ൜ͯ͠΋չ͍͸ແ͍ɻ ͦΕ͚ͩͷ૝͍͕͔֬ʹ༗Δɻ য͕ΕΔ͜ͷڳͷࢥ͍ΛڰؾͱݺͿͳΒ͹ɺԺ΍ ͔ͳ࿀͔͠஌Β͵ݾͷෆጫΛ୰͕͍͍͘ʂ” ήʔϜɿϰΝϧΩϦʔϓϩϑΝΠϧΑΓ (c)2013 SQUARE ENIX CO., LTD.All Rights Reserved.
4. ྫ͑͹͜Μͳཁ๬Λ࣮૷͢Δ <marquee height=45 direction=up> ېسΛ൜ͯ͠΋չ͍͸ແ͍ɻ<br /> ͦΕ͚ͩͷ૝͍͕͔֬ʹ༗Δɻ<br /> য͕ΕΔ͜ͷڳͷࢥ͍ΛڰؾͱݺͿͳΒ͹ɺԺ΍͔ͳ ࿀͔͠஌Β͵ݾͷෆጫΛ୰͕͍͍͘ʂ </marquee> จࣈΛ্ԼʹࣗಈεΫϩʔϧ͍ͤͨ͞ɻແݶεΫϩʔϧͰද͍ࣔͤͨ͞ɻ ͨͩ͠ɺHTML5Ͱ͸ഇࢭ͕༧ఆ͞Ε͍ͯ·͢ʂ࢖༻͠ͳ͍Α͏ʹʂʂ marqueeλάʹ͸པΕͳ͍ͰͷjQueryͷ ϓϥάΠϯͰ͍͍ײ͡ͷΞχϝʔγϣϯͳ ͍͔ͳʁɹ㱺
5. ͍͍ײ͡ͷϓϥάΠϯΛൃݟʂ ېسͱ͸஌Βͣʹ…
6. ࣮૷ import React, { Component } from 'react' import $ from 'jquery' import 'jquery.marquee' export default class message extends Component { componentDidUpdate() { $("div.message-body").marquee({direction: 'up'}) $("div.message-body").marquee('resume') } render() { const { message } = this.props return ( <div className=“message-body"> <p style={{whiteSpace: ‘pre’}}> {message} </p> </div>
7. ॳظදࣔ͸Ͱ͖ͨɻ ͨͩɺ࠶औಘͯ͠΋දࣔϝοηʔδ͕มΘͬͯ΋ը໘ ͕มΘΒͳ͍ɻ αʔόʢAPIʣ͔Βͷऔಘ͸͜Μͳײ͡
8. ࣮ࡍʹग़ྗ͞Ε͍ͯΔHTMLιʔεΛݟͯΈΔͱ… ͋ΕʁͳΜ͔஌Βͳ͍λά͕෇͍͍ͯΔɻ jQuery.Marquee͕ΞχϝʔγϣϯͷͨΊʹ௥Ճ͍ͯ͠Δɻ
9. ݪҼ ReactjsͰ͸ग़ྗͨ࣌͠ͷDOMΛ͍֮͑ͯΔɻ ࠶ඳը͢Δ࣌΋ग़ྗͨ͠DOM͔Βมߋ෦෼͚ͩΛ࡟আͯ͠৽ͨʹDOMΛग़ྗ͢Δɻ ࠓճͷྫͰ͸ɺjQuery.Marquee͕DOMΛॻ͖׵͑ͯ͠·ͬͨͨΊʹൃੜɻ https://facebook.github.io/react/tips/use-react-with-other-libraries.html ରॲ Ҋ̍ɿ jQuery.Marqueeͷ࢖༻Λ΍Ίɺ࣮૷Λม͑Δɻ ɹˠjQueryΞχϝʔγϣϯͳΒOK Ҋ̎ɿ Reactjsͷ࠶ඳըΛࢭΊΔɻ ɹˠ͜ͷҊ͸࠶ඳը͕ߦ͑ͳ͘ͳΔɻ ཁ݅ͱͷ݉Ͷ߹͍͕ͩɺ”ͦͷ̎”Ͱ͍͍ͳΒ…
10. –FreyaɹϑϨΠ “ͤΊͯࢲͷखͰ͋ͳͨΛ຾Γʹ͔ͭͤͯ͋͛ΔΘɻ” ήʔϜɿϰΝϧΩϦʔϓϩϑΝΠϧΑΓ (c)2013 SQUARE ENIX CO., LTD.All Rights Reserved.
11. ࣮૷ʢ࠶ඳըఀࢭ൛ʣ import React, { Component } from 'react' import $ from 'jquery' import 'jquery.marquee' export default class message extends Component { componentDidUpdate() { $("div.message-body").marquee({direction: 'up'}) $("div.message-body").marquee('resume') } shouldComponentUpdate() { return false } render() { const { message } = this.props return ( <div className="message-body"> ࠶ඳըΛͤ͞ͳ͍Α͏ʹ͢Δ͜ͱ͕Մೳ
12. ·ͱΊ • Reactjs֎ͰDOMΛ৮Δͱ࠶ඳըͰ͖ͳ͍ͱߟ͑Δɻ • Reactjs֎ͰDOMΛ৮Δ৔߹ ͸ɺ”componentDidMount"౳ͷඳըޙͰ৮Δ͜ͱɻ • ࠶ඳըΛʮߦ͏ʯ͔ʮߦΘͳ͍͔ʯ൑ఆ͢Δ” shouldComponentUpdate”ͱ͍͏Lifecycle͕ଘࡏ͢ Δɻ ͳͷͰ຤୺ͷཁૉҎ֎Ͱ͸͠ͳ͍Α͏ʹʂʂ
13. ͓·͚ Marquee͸͜Μͳײ͡Ͱ࡞ͬͯΈ·ͨ͠ɻʢڵຯ͋Ε͹ʣ https://gist.github.com/chimame/ 99acd1836992675169f2c705d1fe3209