Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
wejs24.pdf
Kodai Nakamura
September 25, 2018
1
560
wejs24.pdf
Kodai Nakamura
September 25, 2018
Tweet
Share
More Decks by Kodai Nakamura
See All by Kodai Nakamura
kdnk
2
780
kdnk
2
810
kdnk
0
150
kdnk
4
860
kdnk
0
360
Featured
See All Featured
mza
80
4.1k
shpigford
165
19k
jmmastey
9
540
brianwarren
83
4.7k
kneath
219
15k
chriscoyier
780
240k
shpigford
368
42k
geeforr
332
29k
rmw
11
740
mongodb
23
3.8k
samlambert
237
9.9k
lara
16
2.6k
Transcript
©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software
Engineer at Wantedly, inc. JavaScript, TypeScript, React, Rails, Ruby
©2018 Wantedly, Inc. setState
©2018 Wantedly, Inc. increaseByTwo() { this.setState({ value: this.state.value + 1
}); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); }
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. ‣ ίϯϙʔωϯτ͝ͱʹ࣋ͯΔঢ়ଶͷ͜ͱ ‣ state ͕มΘΔͱ࠶ඳը͞ΕΔ ‣ setState
͕͋ͨΒ͍͠ state Λฦ͢ state
©2018 Wantedly, Inc. ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣
stateͷߋ৽batch setStateͷ͍ํ this.setState({comment: 'Hello'}); this.state.comment = 'Hello';
©2018 Wantedly, Inc. ҾʹΦϒδΣΫτΛ͢ increaseByTwo() { this.setState({ value: this.state.value +
1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. ͕͜͜batch increaseByTwo() { this.setState({ value: this.state.value +
1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } ҾʹΦϒδΣΫτΛ͢ ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. { ...this.state.value, value: this.state.value + 1, value:
this.state.value + 1, } ͕͜͜batch increaseByTwo() { this.setState({ value: this.state.value + 1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } தͰ͜Μͳॲཧ͕ߦΘΕ͍ͯΔͣ ҾʹΦϒδΣΫτΛ͢ ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. ‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ ‣ ؔͷ࣮ߦඇಉظ ҾʹؔΛ͢ increaseByTwoCb() {
this.setState(prevState => ({ value: prevState.value + 1 })); this.setState(prevState => ({ value: prevState.value + 1 })); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); }
©2018 Wantedly, Inc. ‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ ‣ ؔͷ࣮ߦඇಉظ increaseByTwoCb() { this.setState(prevState
=> ({ value: prevState.value + 1 })); this.setState(prevState => ({ value: prevState.value + 1 })); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } - ͕ؔΩϡʔʹՃ͞ΕΔ - prevState࠷৽Ͱ͋Δ͜ͱ͕ อূ͞ΕΔ ҾʹؔΛ͢
©2018 Wantedly, Inc. ‣ setState ͕ batching ͞ΕΔͷΠϕϯτϋϯυϥͷத͚ͩ ‣ ΠϕϯτϋϯυϥҎ֎ͩͱ
setState ͙͢ʹ࣮ߦ͞Εͯɺ͕ state ʹө͞ΕΔ ‣ ReactDOM.unstable_batchedUpdates Λ͏ͱΉΓΓ batching Ͱ͖Δ ‣ React 17(?) ͔Β ͯ͢ͷ setState ͕σϑΥϧτͰ batching ಉظతͳsetState
©2018 Wantedly, Inc. ‣ setState batch & ඇಉظ ‣
ͨͩ͠ɺΠϕϯτϋϯυϥҎ֎ͩͱɺಉظత ‣ React v17͔Βɺͯ͢ͷ setState ͕ඇಉظʹͳΔ ·ͱΊ