setState更新状态的两种写法

对象式的setState

setState(stateChange,[callback])

1. stateChange 为状态改变的对象（该对象可以体现出状态的更改）
2. callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用

import React, { Component } from 'react'

export default class Demo extends Compontent {
	state = { count: 0 }
	add = () => {
		// 1.获取count值
		const {count} = this.state
		// 2.更新状态（setState是同步的方法，但是引起更新的状态却是异步的）
		this.setState({count: count+1}, ()=>{
			console.log('render调用后调用：', this.state.count)	// render调用后调用：1
		})
		console.log('输出其实是更新前的值：', this.state.count)	// 输出其实是更新前的值：0
	}
	render () {
		return (
			<div>
				<h3>当前值为: {this.state.count}</h3>
				<button onClink={this.add}>+1</button>
			</div>
		)
	}
}

注意：setState是同步的方法，但是引起更新的状态却是异步的

函数式的setState

setState(updater,[callback])

1. updater 为返回 stateChange 对象的函数
2. updater 可以接受到 state 和 props
3. callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用

import React, { Component } from 'react'

export default class Demo extends Compontent {
	state = { count: 0 }
	add = () => {
		// 函数式
		this.setState(state => ({count: state.count+1}) )
	}
	render () {
		return (
			<div>
				<h3>当前值为: {this.state.count}</h3>
				<button onClink={this.add}>+1</button>
			</div>
		)
	}
}

总结

1. 对象式setState是函数式setState的简写方式（语法糖）
2. 使用原则：

   （1）.如果新状态不依赖与原状态 ===> 使用对象方式
   （1）.如果新状态依赖与原状态 ===> 使用函数方式
   （1）.如果需要在 setState() 执行后获取最新的状态数据，要在callback函数中读取