【react】react中setState的用法

setState的用法

在react中，state是不能直接修改的，要用setState，setState的用法有以下两种：

用法一：setState(updater[, callback])

• updater：函数类型，这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，返回一个更新后的 state 中的状态对象，它会和 state 进行浅合并。

• callback： 可选，回调函数。

用法二：setState(stateChange[, callback])

• setState: 对象类型，会将传入的对象浅层合并到新的 state 中。

• callback：可选，回调函数。

这两种用法如何选择呢？总结为以下两点：

• 当前状态更新无需依赖之前的state状态时，选择对象类型参数

• 当前更新状态依赖之前的状态时，选择函数类型参数

state的更新可能是异步的

setState更新可能是异步的：setState在合成事件和生命周期中是异步的，在setTimeout和原生事件中是同步的；

state的更新可能被合并

这里讨论的前提是state异步更新的情况下，如果是同步更新，那每一次setState都会触发render()

这里分两种情况讨论：

• 当setState() 传对象类型参数，React会合并重复多次的调用setState()，触发一次render。

• 当setState() 传函数类型参数，React会依次多次的调用setState()，触发一次render。

假设count初始值为零，执行下列函数后，结果为2 2 2，这是因为setState第一个参数为对象，且多次setState都是修改count值，setState被合并（执行最后一个setState，count+2）

update1 = () => {
	this.setState({count: this.state.count+0}
	, () => {
	  console.log(this.state.count)
	})
	this.setState({count: this.state.count+1}
	, () => {
	  console.log(this.state.count)
	})
	this.setState({count: this.state.count+2}
	, () => {
	  console.log(this.state.count)
	})
}

若执行以下函数，结果为3 3 3 ，因为setState第一个参数为函数，setState会依次执行（count+0，count+1，count+2）

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