wejs24.pdf

Transcript

1. ©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai Nakamura
2. ©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai Nakamura
3. ©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software Engineer at Wantedly, inc. JavaScript, TypeScript, React, Rails, Ruby
4. ©2018 Wantedly, Inc. setState
5. ©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> ); }
6. ©2018 Wantedly, Inc.
7. ©2018 Wantedly, Inc.
8. ©2018 Wantedly, Inc. ‣ ίϯϙʔωϯτ͝ͱʹ࣋ͯΔঢ়ଶͷ͜ͱ ‣ state ͕มΘΔͱ࠶ඳը͞ΕΔ ‣ setState ͕͋ͨΒ͍͠ state Λฦ͢ state
9. ©2018 Wantedly, Inc. ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͸͠ͳ͍ ‣ setStateΛ࢖͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽͸batch setStateͷ࢖͍ํ this.setState({comment: 'Hello'}); this.state.comment = 'Hello';
10. ©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
11. ©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
12. ©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
13. ©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> ); }
14. ©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͸࠷৽Ͱ͋Δ͜ͱ͕
 อূ͞ΕΔ Ҿ਺ʹؔ਺Λ౉͢
15. ©2018 Wantedly, Inc. ‣ setState ͕ batching ͞ΕΔͷ͸Πϕϯτϋϯυϥͷத͚ͩ ‣ ΠϕϯτϋϯυϥҎ֎ͩͱ setState ͸͙͢ʹ࣮ߦ͞Εͯɺ஋͕ state ʹ൓ө͞ΕΔ ‣ ReactDOM.unstable_batchedUpdates Λ࢖͏ͱΉΓ΍Γ batching Ͱ͖Δ ‣ React 17(?) ͔Β͸ ͢΂ͯͷ setState ͕σϑΥϧτͰ batching ಉظతͳsetState
16. ©2018 Wantedly, Inc. ‣ setState ͸ batch & ඇಉظ ‣ ͨͩ͠ɺΠϕϯτϋϯυϥҎ֎ͩͱɺಉظత ‣ React v17͔Β͸ɺ͢΂ͯͷ setState ͕ඇಉظʹͳΔ ·ͱΊ