Upgrade to Pro — share decks privately, control downloads, hide ads and more …

wejs24.pdf

8ad58ff2bfccf7b4c07b34000c1d6afd?s=47 Kodai Nakamura
September 25, 2018
560

 wejs24.pdf

8ad58ff2bfccf7b4c07b34000c1d6afd?s=128

Kodai Nakamura

September 25, 2018
Tweet

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 ͕ඇಉظʹͳΔ ·ͱΊ