Reactのパフォーマンスを改善する必要がなかった話

Transcript

1. ReactͷύϑΥʔϚϯεΛ վળ͢Δඞཁ͕ͳ͔ͬͨ࿩

2. ࣗݾ঺հɿືɹٛ໌ • ϑϩϯτΤϯυΤϯδχΞ • νʔϜεϐϦοτʹೖࣾ൒೥ • ήʔϜେ޷͖ • ࣾ಺ͷےτϨڭʹೖ৴ͭͭ͋͠Δ

3. ຊ೔ͷ͓࿩ ωοτͰ࠷ۙReactͷ ύϑΥʔϚϯεΛվળͨ͠࿩Λ Α͘ݟΔͷͰ ࣗ෼Ͱ΋΍ͬͯΈͨΒ ಛʹඞཁͳ͔ͬͨͱ͍͏࿩

4. લఏͱͯ͠ Reactͷಛ௃ΛৼΓฦΔ

5. Reactͷ̏ͭͷಛ௃ • JUST THE UI • VIRTUAL DOM • DATA

   FLOW VIRTUAL DOMʹΑΓ ඞཁ࠷௿ݶͷ ύϑΥʔϚϯε͸कΒΕ͍ͯΔ

6. ͋Γ͕ͱ͏ ͓ΘΓ

7. ΋͏গ͠ଓ͚·͢ɾɾɾ

8. ·ͱΊ • React͸Virtul DomͰͷࠩ෼ߋ৽Λߦ͏ͨΊɹ ࠷ॳ͔Β͋Δఔ౓ͷύϑΥʔϚϯε͕อͯΔ Α͏ʹग़དྷ͍ͯΔɻ

9. վΊͯ DOM͸͍ͭߋ৽͞ΕΔͷ͔ʁ

10. Stateͷߋ৽

11. container amountΛߋ৽ State͕ߋ৽࣌ɺ࠶ϨϯμϦϯά͕ൃੜ ίϯϙʔωϯτ܈ $PNQPOFOU% $PNQPOFOU& $PNQPOFOU' $PNQPOFOU$ $PNQPOFOU#
    $PNQPOFOU"

    TFU4UBUF \
    BNPVOU
    
    WBMVF
    ^ ࣮ࡍʹBNPVOUΛ࢖͏
    ίϯϙʔωϯτ

12. ٯΛݴ͏ͱɾɾɾ

13. container setStateʹΑΓ ม਺VΛߋ৽ state͕ίϯϙʔωϯτʹ౉͍ͬͯΕ͹ɺ ྫ͑ະ࢖༻Ͱ΋࠶ϨϯμϦϯά͕૸Δ ίϯϙʔωϯτ܈ ίϯϙʔωϯτ
    $PNQPOFOU% $PNQPOFOU& $PNQPOFOU'

    $PNQPOFOU$ $PNQPOFOU# $PNQPOFOU" BNPVOUΛνΣοΫ BNPVOUΛʜ BNPVOUΛ νΣοΫ BN TFU4UBUF \
    BNPVOU
    
    WBMVF
    ^ ࣮ࡍʹBNPVOUΛ࢖͏
    ίϯϙʔωϯτ

14. ࠶ϨϯμϦϯάͷ ճ਺ΛݮΒ͢ʹ͸ʁ

15. state͸ઙ͘อͪɺ֤ίϯϙʔωϯτͷ ߋ৽ʹඞཁͳ΋ͷ͚ͩ౉͢Α͏৺͕͚Δ this.state = { // ඞཁͳstateΛҰͭͷΦϒδΣΫτʹશͯ֨ೲ͍ͯ͠Δύλʔϯ masterObject: { date:

    ‘2017-5-15’, amount: 3000, name: ‘tawashi’, } }; this.state = { // stateΛ෼ׂͨ͠ date: ‘2017-5-15’, amount: 3000, name: ‘tawashi’, };

16. Spread Attributes΍ChildrenͳͲͷ ͝ར༻͸ܭըతʹ render() { // Spread Attributes return <Meat

    {...props} />; } • όέπϦϨʔʹർΕͨਓͷٹੈओ • ͝ར༻͸ܭըతʹ

17. ෆཁͳpropsͷड͚౉͠ΛࢭΊΔ class MeatMarker extends Component { render() { return <Meat

    A={this.props.A} B={this.props.B} V={this.props.V} />; } } • ԼҐίϯϙʔωϯτʹ౉͢஋͸ඞཁͳ΋ͷͩ ͚ʹ͠·͠ΐ͏ • ϨϏϡʔ΍ݟ௚͠͸͔ͬ͠Γͱ

18. ReactϙϦεʢϨϏϡʔΞʣͱͯ͠ ͔ͬ͠Γ࢓ࣄ͍͖ͯ͠·͠ΐ͏

19. ·ͱΊ • React͸Virtul DomͰͷࠩ෼ߋ৽Λߦ͏ͨΊɹ ɹ ࠷ॳ͔Β͋Δఔ౓ͷύϑΥʔϚϯε͕อͯΔ Α͏ʹग़དྷ͍ͯΔɻ • React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ ੒͞Ε͍ͯΔ͔ৗʹ֬ೝ͢Δɻ

20. ΋͏Ұ੠ؤுͬͯΈΔ

21. componentWillUpdate(nextProps) { console.log(this.state.amount); console.log(nextProps.amount); } // લճͱඳը݁Ռ͕Ұॹ͕ͩ࠶౓ϨϯμϦϯά͸࣮ࢪ͞ΕΔ render(){ ɹˡɹ return

    (<p>{amount}</p>); } ߋ৽ͷલޙͰState͕ಉҰͷ৔߹Ͱ΋ ࠶ϨϯμϦϯά͕૸Δ

22. ࠶ϨϯμϦϯάͷ ճ਺ΛݮΒ͢ʹ͸ʁ

23. shouldComponentUpdate

24. shouldComponentUpdate class MeatMarker extends Component { shouldComponentUpdate: function(nextProps, nextState) {

    if (this.props.userName !== nextProps.userName) { return true;ɹˡ update࣮ࢪ } else { return false;ɹˡɹupdate͞Εͳ͍ } } • ίϯϙʔωϯτΛ࠶ඳը͢Δ͔Ͳ͏͔Λܾఆ͢Δ • updateલʹ࣮ߦ͞ΕΔɻ • ໭Γ஋ͰfalseΛฦͤ͹update͸࣮ࢪ͞Εͳ͍ɹ (σϑΥϧτͰ͸ඞͣtrue͕ฦΓ·͢)

25. shouldComponentUpdateΑ͋͘Δ࣮૷ shouldComponentUpdate: function(nextProps, nextState) { // user໊͕ߋ৽લޙͰಉҰͳΒߋ৽ॲཧ͸࣮ࢪ͠ͳ͍ return this.props.userName !==

    nextProps.userName; } ̍.৚݅Λઃܭ࣮ͯ͠૷ 2.lodash΍immutable.jsΛར༻࣮ͨ͠૷ shouldComponentUpdate: function(nextProps, nextState) { // ߋ৽લޙͰ஋͕มΘ͍ͬͯͳ͚Ε͹ɺupdate͸࣮ࢪ͠ͳ͍ const propsDiff = _.isEqual(nextProps, this.props); const stateDiff = _.isEqual(nextState, this.state); return !(propsDiff && stateDiff); }

26. PureComponentͰ΋OK class MeatMarker extends Component { constructor(props) { super(props); ɹɹɹɹɹɹɹ!

    //extendsઌΛPureComponentʹมߋ͢Δʮ͚ͩʯͰར༻Ͱ͖Δ class MeatMarker extends PureComponent { constructor(props) { super(props); • React v15.3Ҏ߱Ͱ࣮૷͞Ε͍ͯΔ • shouldComponentUpdateΛཪͰ࣮૷ • શͯͷstateͱpropsʹshallowͳൺֱΛ࣮ࢪ

27. ೦ͷͨΊͷshallowͳൺֱͷ͓͞Β͍ ̍ճ໨ api.get("/api/user",(req, res) => { this.setState({user:res}) ); console.log(this.state.user); ݁Ռ

    {user: ‘minato’ , company: ‘TeamSpirit’} ̎ճ໨ api.get("/api/user",(req, res) => { this.setState({user:res}) ); console.log(this.state.user); ݁Ռ {user: ‘minato’ , company: ‘TeamSpirit’} ̍ճ໨ͱ̎ճ໨ͰผͷΦϒδΣΫτΛ ੜ੒͍ͯ͠ΔͷͰtrue͕ؼΓ·͢

28. WARNING!

29. Կ΋ߟ࣮͑ͣ૷͢Δͷ͸·͍ͣ class BaseComponent extends React.Component { shouldComponentUpdate: function(nextProps, nextState) {

    const propsDiff = _.isEqual(nextProps, this.props); const stateDiff = _.isEqual(nextState, this.state); return !(propsDiff && stateDiff); } } ɹྫ͑͹ҎԼͷΑ͏ʹߋ৽લޙͷstateɺprops Λൺֱ͢ΔBaseClassΛ࣮૷͠ɺશͯͷclassͰܧ ঝͯ͠ൺֱॲཧΛ࣮૷͢ΔͱɺٯʹύϑΥʔϚ ϯε͕௿Լ͢ΔՄೳੑ͕͋Δʢͱݴ͏͔͢Δʣ

30. Ͳ͜ʹ࣮૷͢΂͖͔͸ ͪΌΜͱݕ౼͔ͯ͠Βʹ ͠·͠ΐ͏

31. ·ͱΊ • React͸Virtul DomͰͷࠩ෼ߋ৽Λߦ͏ͨΊɹ ɹ ࠷ॳ͔Β͋Δఔ౓ͷύϑΥʔϚϯε͕อͯΔ Α͏ʹग़དྷ͍ͯΔɻ • React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ ੒͞Ε͍ͯΔ͔ৗʹ֬ೝ͢Δɻ

    • shouldComponentUpdateͰߋ৽લޙͷ஋͕ ಉҰͷ৔߹ʹߋ৽ॲཧΛߦΘͳ͍Α͏ʹ͢Δ

32. ͜͜·Ͱ͸༧๷

33. ͔͜͜Β͸ର঱ྍ๏

34. ύϑΥʔϚϯεͷ ϘτϧωοΫΛ୳͢

35. PerfͷಋೖɻPerfͱ͸Կ͔ʁ • ίϯϙʔωϯτͷඳըʹ͔͔Δ࣌ؒΛௐ΂Δ ͜ͱ͕Ͱ͖Δπʔϧ • ϒϥ΢βͷίϯιʔϧ্Ͱಈ࡞͢Δ ↓͜Μͳײ͡ͷ݁Ռ͕ग़ͯͲ͜ʹ͕͔͔͍࣌ؒͬͯΔ֬ೝͰ͖Δ

36. PerfͰͷݪҼಛఆͱରॲํ๏ import React from ‘react'; import Perf from 'react-addons-perf'; class

    MeatMaker extends React.Component { componentDidMount() { window.Perf = Perf; }; } 1. componentDidMountͰPerfΛWindowʹ ηοτ͢Δɻ Reactιʔείʔυ

37. PerfͰͷݪҼಛఆͱରॲํ๏ 2. Perf.start()Λ࣮ߦɻ 3. ޷͖ͳ͚ͩΞΫγϣϯΛى͜͢ɻ 4. Perf.stop()Λ࣮ߦɻ 5. getLastMeasurementsͰ಺༰Λ֬ೝ͠ɺ࣌ؒ ͕͔͔͍ͬͯΔՕॴΛ֬ೝɻ

    ϒϥ΢βίϯιʔϧ ͜͜ΒลͳΜ͔΍͹ͦ͏

38. PerfͰͷݪҼಛఆͱରॲํ๏ʢผղʣ import React from ‘react'; import Perf from 'react-addons-perf'; class

    MeatMaker extends React.Component { componentDidMount() { window.Perf = Perf; } render (){ return ( <div> {Perf.start()} <MeatMaker /> {Perf.stop()} <ChikenMaker /> </div> ); } } ίϯϙʔωϯτͷಡΈࠐΈલޙͰstartɺstopΛ࣮ ࢪɺ֬ೝ͸ͦͷޙϒϥ΢β͔Βߦͬͯ΋OK

39. ݪҼ΍৔ॴΛಛఆͨ͠ޙͷରॲํ๏͸ʁ جຊ͸લ߲·ͰͷLTͷ಺༰Λ ࢥ͍ฦ͍͚ͯͨͩ͠Ε͹ େৎ෉ʢͷ͸ͣʣʂ

40. ۩ମతʹ͸ʁʢ͓͞Β͍ʣ • ߏ੒Λݟ௚͠ • ෆཁͳpropsͷ࡟আ • shouldComponentUpdate(PureComponent) ͷ࣮૷

41. ݪҼͱରॲฤʢ͓·͚ʣ getSubContainer() { switch (this.state.selectedKey) { case 'meat': return (<Meat

    />); case 'chicken': return (<chicken />); default : return null; } }Window.Perf.start()Λ࣮ߦ ↓ຖճίϯϙʔωϯτΛ࠶࡞੒͍ͯ͠ΔͷͰॏ͍

42. ݪҼͱରॲฤʢ͓·͚ʣ renderSubContainer() { {const meat = this.state.selectedKey === ‘meat’ }

    {const chicken = this.state.selectedKey === ‘chicken’ } return ( <div> <Meat visible={meat} /> <Chicken visible={chicken} />); </div> ); } ঢ়گʹԠͯ͡ίϯϙʔωϯτΛඇදࣔʹ͠ɺ ࠶࡞੒͸ࣙΊͯΈͨ

43. ࠶ϨϯμϦϯά͸ૣ͘ͳͬͨʂ

44. ͕

45. ॳظදࣔ͸஗͘ͳΓ ϝϞϦͷৗ࣌ͷ࢖༻ྔ͸૿͑ͨ

46. ଥ౰ͳτϨʔυΦϑ͔ ݕূ͸ඞཁ ΫϫΨλ खฤΈͷϚϑϥʔ

47. ·ͱΊ • React͸Virtul DomͰͷࠩ෼ߋ৽Λߦ͏ͨΊɺ࠷ॳ͔Β ͋Δఔ౓ͷύϑΥʔϚϯε͕อͯΔΑ͏ʹग़དྷ͍ͯΔɻ • React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ੒͞Εͯ ͍Δ͔ৗʹ֬ೝ͢Δɻ • shouldComponentUpdateͰߋ৽લޙͷ஋͕ಉҰͷ৔߹

    ʹߋ৽ॲཧΛߦΘͳ͍Α͏ʹ͢Δɻ • ϨϯμϦϯά͕஗͍৔߹͸PerfΛ࢖ͬͯݪҼΛಛఆ͠ɺ ରॲྍ๏Λ࣮૷͢Δɻ࣮૷͸ܭըతʹ

48. ࠷ޙʹࠓߋͰ͕͢ λΠτϧͷ݅ʹ͍ͭͯ

49. ॳΊͯฐࣾͷ੡඼ͷύϑΥʔϚϯεΛҙࣝͨ࣌͠ • ฐࣾͷϓϩμΫτ͸೔ࠒͷϨϏϡʔΛ͋Δఔ ౓͔ͬ͠Γ΍͍ͬͯͨ͜ͱ΋͋Γɺɹɹɹɹ ผʹࠓ͙͢ύϑΥʔϚϯεΛҙࣝͨ͠मਖ਼Λ ࣮ࢪ͠ͳͯ͘΋͍͍͔ͳɻͱ͍͏ͷ͕࠷ॳͷ ײ૝Ͱͨ͠ɻ • ࣮૷ͯ͠΋ମײͰ͖Δఔͷ͕ࠩ͋·Γແ͘ɺ ଞͷݕ౼ࣄ߲͕ग़ͦ͏ͩͬͨ

    • ϚδͰࠔͬͨΒPerfͰͳΜͱ͔͢Δ

50. ·ͱΊͷ·ͱΊ • React͸Virtual Domͷࢥ૝΋͋Γɺҙࣝͤͣ ͱ΋ύϑΥʔϚϯε͸͋Δఔ౓ग़Δɻ • ઃܭͱ೔ࠒͷϨϏϡʔ͕େࣄɻઃܭ΍೔ࠒͷ ϨϏϡʔ͕ສશͳΒ͹ɺͦ΋ͦ΋ύϑΥʔϚ ϯεͷվળࣗମ͕ෆཁͳ͜ͱ΋ଟ͍ɻ •

    ϚδͰࠔͬͨΒPerfͰͳΜͱ͔͢Δ

51. ྑ͍ReactϥΠϑΛ

52. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠