~~~ increase = () => { // // 第二，不要直接修改 state ，使用不可變值 ---------------------------- // // this.state.count++ // 錯誤 // this.setState({ // count: this.state.count + 1 // SCU // }) // 操作數組、對象的的常用形式 // 第三，setState 可能是異步更新（有可能是同步更新） ---------------------------- // this.setState({ // count: this.state.count + 1 // }, () => { // // 聯想 Vue $nextTick - DOM // console.log('count by callback', this.state.count) // 回調函數中可以拿到最新的 state // }) // console.log('count', this.state.count) // 異步的，拿不到最新值 // // setTimeout 中 setState 是同步的 // setTimeout(() => { // this.setState({ // count: this.state.count + 1 // }) // console.log('count in setTimeout', this.state.count) // }, 0) // 自己定義的 DOM 事件，setState 是同步的。再 componentDidMount 中 // 第四，state 異步更新的話，更新前會被合并 ---------------------------- // // 傳入對象，會被合并（類似 Object.assign ）。執行結果只一次 +1 // this.setState({ // count: this.state.count + 1 // }) // this.setState({ // count: this.state.count + 1 // }) // this.setState({ // count: this.state.count + 1 // }) // 傳入函數，不會被合并。執行結果是 +3 this.setState((prevState, props) => { return { count: prevState.count + 1 } }) this.setState((prevState, props) => { return { count: prevState.count + 1 } }) this.setState((prevState, props) => { return { count: prevState.count + 1 } }) } ~~~ ~~~ // bodyClickHandler = () => { // this.setState({ // count: this.state.count + 1 // }) // console.log('count in body event', this.state.count) // } // componentDidMount() { // // 自己定義的 DOM 事件，setState 是同步的 // document.body.addEventListener('click', this.bodyClickHandler) // } // componentWillUnmount() { // // 及時銷毀自定義 DOM 事件 // document.body.removeEventListener('click', this.bodyClickHandler) // // clearTimeout // } ~~~