setState 更新狀态的兩種寫法

(1). setState(stateChange, [callback])------對象式的setState
        1.stateChange為狀态改變對象(該對象可以展現出狀态的更改)
        2.callback是可選的回調函數, 它在狀态更新完畢、界面也更新後(render調用後)才被調用
				
(2). setState(updater, [callback])------函數式的setState
        1.updater為傳回stateChange對象的函數。
        2.updater可以接收到state和props。
        4.callback是可選的回調函數, 它在狀态更新、界面也更新後(render調用後)才被調用。
           

示例：

import React, { Component } from 'react'

export default class Demo extends Component {
  state = { count: 0 }
  add = () => {
    // 對象式的setState
    // react狀态的更新是異步的
    this.setState({ count:  this.state.count + 1 }, () => {
      console.log(this.state.count)//結果為 更新後時的值
    })
    // 函數式的setState 
    // this.setState((state, props) => {
    //   console.log(state, props);
    //   return ({ count: state.count + 1 })
    // }, () => {
    //   console.log(this.state.count)//結果為 更新後時的值
    // })
    // console.log(this.state.count)//結果為 沒更新時的值 
}
  
  render() {
    return (
      <div>
        <h1>目前求和為：{this.state.count}</h1>
        <button onClick={ this.add }>點我+1</button>
      </div>
    )
  }
}


           

總結:

1.對象式的setState是函數式的setState的簡寫方式(文法糖)
	2.使用原則：
			(1).如果新狀态不依賴于原狀态 ===> 使用對象方式
			(2).如果新狀态依賴于原狀态 ===> 使用函數方式
			(3).如果需要在setState()執行後擷取最新的狀态資料, 
				要在第二個callback函數中讀取