Slide 1
Slide 1 text
ReactͷύϑΥʔϚϯεΛ
վળ͢Δඞཁ͕ͳ͔ͬͨ
Slide 2
Slide 2 text
ࣗݾհɿືɹٛ໌
• ϑϩϯτΤϯυΤϯδχΞ
• νʔϜεϐϦοτʹೖࣾ
• ήʔϜେ͖
• ࣾͷےτϨڭʹೖ৴ͭͭ͋͠Δ
Slide 3
Slide 3 text
ຊͷ͓
ωοτͰ࠷ۙReactͷ
ύϑΥʔϚϯεΛվળͨ͠Λ
Α͘ݟΔͷͰ
ࣗͰͬͯΈͨΒ
ಛʹඞཁͳ͔ͬͨͱ͍͏
Slide 4
Slide 4 text
લఏͱͯ͠
ReactͷಛΛৼΓฦΔ
Slide 5
Slide 5 text
Reactͷ̏ͭͷಛ
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW
VIRTUAL DOMʹΑΓ
ඞཁ࠷ݶͷ
ύϑΥʔϚϯεकΒΕ͍ͯΔ
Slide 6
Slide 6 text
͋Γ͕ͱ͏
͓ΘΓ
Slide 7
Slide 7 text
͏গ͠ଓ͚·͢ɾɾɾ
Slide 8
Slide 8 text
·ͱΊ
• ReactVirtul DomͰͷࠩߋ৽Λߦ͏ͨΊɹ
࠷ॳ͔Β͋ΔఔͷύϑΥʔϚϯε͕อͯΔ
Α͏ʹग़དྷ͍ͯΔɻ
Slide 9
Slide 9 text
վΊͯ
DOM͍ͭߋ৽͞ΕΔͷ͔ʁ
Slide 10
Slide 10 text
Stateͷߋ৽
Slide 11
Slide 11 text
container
amountΛߋ৽
State͕ߋ৽࣌ɺ࠶ϨϯμϦϯά͕ൃੜ
ίϯϙʔωϯτ܈
$PNQPOFOU% $PNQPOFOU& $PNQPOFOU'
$PNQPOFOU$
$PNQPOFOU#
$PNQPOFOU"
TFU4UBUF \BNPVOUWBMVF^
࣮ࡍʹBNPVOUΛ͏
ίϯϙʔωϯτ
Slide 12
Slide 12 text
ٯΛݴ͏ͱɾɾɾ
Slide 13
Slide 13 text
container
setStateʹΑΓ
มVΛߋ৽
state͕ίϯϙʔωϯτʹ͍ͬͯΕɺ
ྫ͑ະ༻Ͱ࠶ϨϯμϦϯά͕Δ
ίϯϙʔωϯτ܈
ίϯϙʔωϯτ
$PNQPOFOU% $PNQPOFOU& $PNQPOFOU'
$PNQPOFOU$
$PNQPOFOU#
$PNQPOFOU"
BNPVOUΛνΣοΫ
BNPVOUΛʜ
BNPVOUΛ
νΣοΫ
BN
TFU4UBUF \BNPVOUWBMVF^
࣮ࡍʹBNPVOUΛ͏
ίϯϙʔωϯτ
Slide 14
Slide 14 text
࠶ϨϯμϦϯάͷ
ճΛݮΒ͢ʹʁ
Slide 15
Slide 15 text
stateઙ͘อͪɺ֤ίϯϙʔωϯτͷ
ߋ৽ʹඞཁͳͷ͚ͩ͢Α͏৺͕͚Δ
this.state = {
// ඞཁͳstateΛҰͭͷΦϒδΣΫτʹશͯ֨ೲ͍ͯ͠Δύλʔϯ
masterObject: {
date: ‘2017-5-15’,
amount: 3000,
name: ‘tawashi’,
}
};
this.state = {
// stateΛׂͨ͠
date: ‘2017-5-15’,
amount: 3000,
name: ‘tawashi’,
};
Slide 16
Slide 16 text
Spread AttributesChildrenͳͲͷ
͝ར༻ܭըతʹ
render() {
// Spread Attributes
return ;
}
• όέπϦϨʔʹർΕͨਓͷٹੈओ
• ͝ར༻ܭըతʹ
Slide 17
Slide 17 text
ෆཁͳpropsͷड͚͠ΛࢭΊΔ
class MeatMarker extends Component {
render() {
return ;
}
}
• ԼҐίϯϙʔωϯτʹ͢ඞཁͳͷͩ
͚ʹ͠·͠ΐ͏
• ϨϏϡʔݟ͔ͬ͠͠Γͱ
Slide 18
Slide 18 text
ReactϙϦεʢϨϏϡʔΞʣͱͯ͠
͔ͬ͠Γࣄ͍͖ͯ͠·͠ΐ͏
Slide 19
Slide 19 text
·ͱΊ
• ReactVirtul DomͰͷࠩߋ৽Λߦ͏ͨΊɹ
ɹ
࠷ॳ͔Β͋ΔఔͷύϑΥʔϚϯε͕อͯΔ
Α͏ʹग़དྷ͍ͯΔɻ
• React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ
͞Ε͍ͯΔ͔ৗʹ֬ೝ͢Δɻ
Slide 20
Slide 20 text
͏ҰؤுͬͯΈΔ
Slide 21
Slide 21 text
componentWillUpdate(nextProps) {
console.log(this.state.amount);
console.log(nextProps.amount);
}
// લճͱඳը݁Ռ͕Ұॹ͕ͩ࠶ϨϯμϦϯά࣮ࢪ͞ΕΔ
render(){ ɹˡɹ
return (
{amount}
); } ߋ৽ͷલޙͰState͕ಉҰͷ߹Ͱ ࠶ϨϯμϦϯά͕ΔSlide 22
Slide 22 text
࠶ϨϯμϦϯάͷ
ճΛݮΒ͢ʹʁ
Slide 23
Slide 23 text
shouldComponentUpdate
Slide 24
Slide 24 text
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͕ฦΓ·͢)
Slide 25
Slide 25 text
shouldComponentUpdateΑ͋͘Δ࣮
shouldComponentUpdate: function(nextProps, nextState) {
// user໊͕ߋ৽લޙͰಉҰͳΒߋ৽ॲཧ࣮ࢪ͠ͳ͍
return this.props.userName !== nextProps.userName;
}
̍.݅Λઃܭ࣮ͯ͠
2.lodashimmutable.jsΛར༻࣮ͨ͠
shouldComponentUpdate: function(nextProps, nextState) {
// ߋ৽લޙͰ͕มΘ͍ͬͯͳ͚Εɺupdate࣮ࢪ͠ͳ͍
const propsDiff = _.isEqual(nextProps, this.props);
const stateDiff = _.isEqual(nextState, this.state);
return !(propsDiff && stateDiff);
}
Slide 26
Slide 26 text
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ͳൺֱΛ࣮ࢪ
Slide 27
Slide 27 text
೦ͷͨΊͷ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͕ؼΓ·͢
Slide 28
Slide 28 text
WARNING!
Slide 29
Slide 29 text
Կߟ࣮͑ͣ͢Δͷ·͍ͣ
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Ͱܧ
ঝͯ͠ൺֱॲཧΛ࣮͢ΔͱɺٯʹύϑΥʔϚ
ϯε͕Լ͢ΔՄೳੑ͕͋Δʢͱݴ͏͔͢Δʣ
Slide 30
Slide 30 text
Ͳ͜ʹ࣮͖͔͢
ͪΌΜͱݕ౼͔ͯ͠Βʹ
͠·͠ΐ͏
Slide 31
Slide 31 text
·ͱΊ
• ReactVirtul DomͰͷࠩߋ৽Λߦ͏ͨΊɹ
ɹ
࠷ॳ͔Β͋ΔఔͷύϑΥʔϚϯε͕อͯΔ
Α͏ʹग़དྷ͍ͯΔɻ
• React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ
͞Ε͍ͯΔ͔ৗʹ֬ೝ͢Δɻ
• shouldComponentUpdateͰߋ৽લޙͷ͕
ಉҰͷ߹ʹߋ৽ॲཧΛߦΘͳ͍Α͏ʹ͢Δ
Slide 32
Slide 32 text
͜͜·Ͱ༧
Slide 33
Slide 33 text
͔͜͜Βରྍ๏
Slide 34
Slide 34 text
ύϑΥʔϚϯεͷ
ϘτϧωοΫΛ୳͢
Slide 35
Slide 35 text
PerfͷಋೖɻPerfͱԿ͔ʁ
• ίϯϙʔωϯτͷඳըʹ͔͔Δ࣌ؒΛௐΔ
͜ͱ͕Ͱ͖Δπʔϧ
• ϒϥβͷίϯιʔϧ্Ͱಈ࡞͢Δ
↓͜Μͳײ͡ͷ݁Ռ͕ग़ͯͲ͜ʹ͕͔͔͍࣌ؒͬͯΔ֬ೝͰ͖Δ
Slide 36
Slide 36 text
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ιʔείʔυ
Slide 37
Slide 37 text
PerfͰͷݪҼಛఆͱରॲํ๏
2. Perf.start()Λ࣮ߦɻ
3. ͖ͳ͚ͩΞΫγϣϯΛى͜͢ɻ
4. Perf.stop()Λ࣮ߦɻ
5. getLastMeasurementsͰ༰Λ֬ೝ͠ɺ࣌ؒ
͕͔͔͍ͬͯΔՕॴΛ֬ೝɻ
ϒϥβίϯιʔϧ
͜͜ΒลͳΜ͔ͦ͏
Slide 38
Slide 38 text
PerfͰͷݪҼಛఆͱରॲํ๏ʢผղʣ
import React from ‘react';
import Perf from 'react-addons-perf';
class MeatMaker extends React.Component {
componentDidMount() {
window.Perf = Perf;
}
render (){
return (
{Perf.start()}
{Perf.stop()}
);
}
}
ίϯϙʔωϯτͷಡΈࠐΈલޙͰstartɺstopΛ࣮
ࢪɺ֬ೝͦͷޙϒϥβ͔ΒߦͬͯOK
Slide 39
Slide 39 text
ݪҼॴΛಛఆͨ͠ޙͷରॲํ๏ʁ
جຊલ߲·ͰͷLTͷ༰Λ
ࢥ͍ฦ͍͚ͯͨͩ͠Ε
େৎʢͷͣʣʂ
Slide 40
Slide 40 text
۩ମతʹʁʢ͓͞Β͍ʣ
• ߏΛݟ͠
• ෆཁͳpropsͷআ
• shouldComponentUpdate(PureComponent)
ͷ࣮
Slide 41
Slide 41 text
ݪҼͱରॲฤʢ͓·͚ʣ
getSubContainer() {
switch (this.state.selectedKey) {
case 'meat':
return ();
case 'chicken':
return ();
default :
return null;
}
}Window.Perf.start()Λ࣮ߦ
↓ຖճίϯϙʔωϯτΛ࠶࡞͍ͯ͠ΔͷͰॏ͍
Slide 42
Slide 42 text
ݪҼͱରॲฤʢ͓·͚ʣ
renderSubContainer() {
{const meat = this.state.selectedKey === ‘meat’ }
{const chicken = this.state.selectedKey === ‘chicken’ }
return (
);
);
}
ঢ়گʹԠͯ͡ίϯϙʔωϯτΛඇදࣔʹ͠ɺ
࠶࡞ࣙΊͯΈͨ
Slide 43
Slide 43 text
࠶ϨϯμϦϯάૣ͘ͳͬͨʂ
Slide 44
Slide 44 text
͕
Slide 45
Slide 45 text
ॳظදࣔ͘ͳΓ
ϝϞϦͷৗ࣌ͷ༻ྔ૿͑ͨ
Slide 46
Slide 46 text
ଥͳτϨʔυΦϑ͔
ݕূඞཁ
ΫϫΨλ
खฤΈͷϚϑϥʔ
Slide 47
Slide 47 text
·ͱΊ
• ReactVirtul DomͰͷࠩߋ৽Λߦ͏ͨΊɺ࠷ॳ͔Β
͋ΔఔͷύϑΥʔϚϯε͕อͯΔΑ͏ʹग़དྷ͍ͯΔɻ
• React͕ύϑΥʔϚϯεΛൃشͰ͖ΔΑ͏ʹߏ͞Εͯ
͍Δ͔ৗʹ֬ೝ͢Δɻ
• shouldComponentUpdateͰߋ৽લޙͷ͕ಉҰͷ߹
ʹߋ৽ॲཧΛߦΘͳ͍Α͏ʹ͢Δɻ
• ϨϯμϦϯά͕͍߹PerfΛͬͯݪҼΛಛఆ͠ɺ
ରॲྍ๏Λ࣮͢Δɻ࣮ܭըతʹ
Slide 48
Slide 48 text
࠷ޙʹࠓߋͰ͕͢
λΠτϧͷ݅ʹ͍ͭͯ
Slide 49
Slide 49 text
ॳΊͯฐࣾͷͷύϑΥʔϚϯεΛҙࣝͨ࣌͠
• ฐࣾͷϓϩμΫτࠒͷϨϏϡʔΛ͋Δఔ
͔ͬ͠Γ͍ͬͯͨ͜ͱ͋Γɺɹɹɹɹ
ผʹࠓ͙͢ύϑΥʔϚϯεΛҙࣝͨ͠मਖ਼Λ
࣮ࢪ͠ͳ͍͍͔ͯ͘ͳɻͱ͍͏ͷ͕࠷ॳͷ
ײͰͨ͠ɻ
• ࣮ͯ͠ମײͰ͖Δఔͷ͕ࠩ͋·Γແ͘ɺ
ଞͷݕ౼ࣄ߲͕ग़ͦ͏ͩͬͨ
• ϚδͰࠔͬͨΒPerfͰͳΜͱ͔͢Δ
Slide 50
Slide 50 text
·ͱΊͷ·ͱΊ
• ReactVirtual Domͷࢥ͋Γɺҙࣝͤͣ
ͱύϑΥʔϚϯε͋Δఔग़Δɻ
• ઃܭͱࠒͷϨϏϡʔ͕େࣄɻઃܭࠒͷ
ϨϏϡʔ͕ສશͳΒɺͦͦύϑΥʔϚ
ϯεͷվળࣗମ͕ෆཁͳ͜ͱଟ͍ɻ
• ϚδͰࠔͬͨΒPerfͰͳΜͱ͔͢Δ
Slide 51
Slide 51 text
ྑ͍ReactϥΠϑΛ
Slide 52
Slide 52 text
͝੩ௌ
͋Γ͕ͱ͏͍͟͝·ͨ͠