1.总体看来

(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调用后)才被调用。
总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则：
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取

2.setState的执行是异步的

一般可能setState都是直接this.setState({})使用的

import React, { Component } from 'react'

export default class Demo extends Component {

	state = {count:0}
	add = ()=>{
		//对象式的setState
		//1.获取原来的count值
		const {count} = this.state
		//2.更新状态
		//setState其实是同步的，但是交给了react去执行，不是马上去执行执行是异步的
		this.setState({count:count+1},()=>{
			console.log(this.state.count);
		})
		console.log('12行的输出',this.state.count); 
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.state.count}</h1>
				<button onClick={this.add}>点我+1</button>
			</div>
		)
	}
}

可以看到控制台的打印出来的值是不一样的，回调里可以拿到更新后的准确值，有点类似于vue的$nextTick

3.函数式setState

函数式的setState可以直接到state和props参数

    this.setState(
      (state, props) => {
        console.log(state, props);
        return { count: state.count + 1 };
      },
      () => {
        console.log(this.state.count);
      }
    );