如何使用代码
安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。
请根据文章内容，把相应部分的代码注释取消，即可运行。
摘要
本文介绍
- setState() 的异步性
- setState 的回调函数
- setState 获取之前的状态
项目代码地址：React 拾遗：类作为组件 (3)
setState 的异步性
请注意：setState() 可能是异步的。
假设我们需要实现：点击标题，文字从 'Hello' 改变成 'changed'。在改变前后，把 state 中的 title 打印出来。改变之前应该是 'Hello'，改变之后应该是 'change'。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
title: 'Hello'
};
changeTitle = () => {
console.log(this.state.title);
this.setState({ title: 'changed' })
console.log(this.state.title);
}
render() {
return (
<div>
<h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
点击标题触发 setState，获得打印结果，全部都是之前的状态，第二个不是改变后的状态。
Hello
Hello
>
setState() 不是马上就去改变状态。
原因是：React 中状态 state 如果被更改，会触发重新渲染，而渲染是代价很高的动作。假设 setState 是一个同步动作，改变状态后触发渲染，可能会导致浏览器没有响应。为了性能考虑，状态改变之前与之后有一个过渡状态，setState 会把所有的改变状态的请求汇总、形成一个队列，React 会根据队列去执行状态改变的任务。所以 setState 类似于一个 http 请求（request），并不是发起请求以后，马上就有请求的结果。setState 负责归并请求、形成队列，React 会根据情况修改状态、触发渲染。
重点是，setState() 改变状态，然后马上去获取改变后的状态，并不能可能还是之前的状态。
setState 的回调函数
如果一定要 setState 之后，获取到状态改变之后的数据，有两种方法：
- 使用 setState 的回调函数
- 使用生命周期 componentDidUpdate 函数
setState 的回调函数是可选项。
setState(stateChange[, callback])
把之前的代码中加入回调函数
changeTitle = () => {
console.log(this.state.title);
this.setState({ title: 'changed' }, () => {
console.log(this.state.title)
})
console.log(this.state.title);
}
再次点击标题触发 setState，获得打印结果会得到。最后 'changed' 就是 setState 的回调函数得到的结果。
Hello
Hello
changed
>
setState 获取之前的状态
如果 setState 不依赖之前的状态，就是直接修改，比如之前使用的代码：
setState({ title: 'changed' })
但是如果 setState 依赖之前的状态，就可以写成如下类似的代码：
setState({ num: this.state.num +1 })
完整代码是
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
num: 0
};
changeTitle = () => {
this.setState({
num: this.state.num + 1
});
};
render() {
return (
<div>
<h1>Count: {this.state.num}</h1>
<button onClick={this.changeTitle}>Increment</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
但是，这个 this.state.<someVariable> 是一个不稳定的存在。因为 setState 形成了一个状态改变请求的队列。本次修改使用的 this.state.<someVariable> 可能并不是理想的前次状态的结果。
如果状态修改依赖之前的状态数据，最佳实践是使用更新函数。
- 在
this.setState()中传入的参数不再是一个对象，而是一个更新函数（updater function）。 - 更新函数第一个参数就是之前的状态，第二个函数是 props。
- 用之前的状态
prevState来替代this.state是最佳实践
this.setState((prevState, props) => {
return { num: prevState.counter + 1 };
});
完整的修改函数是：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
num: 0
};
changeTitle = () => {
this.setState((prevState, props) => {
return { num: prevState.num + 1 }
});
};
render() {
return (
<div>
<h1>Count: {this.state.num}</h1>
<button onClick={this.changeTitle}>Increment</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
另外提一点，之前使用返回对象的形式。
this.setState({ title: 'changed' })
即使使用不带参数的箭头函数，也可以实现。据称后面这种箭头函数的形式，渲染性能更佳。
this.setState(() => { title: 'changed' })
