为什么要使用setState修改数据
- 原因就是希望通过修改了state之后,能够使得React根据最新的state来重新渲染界面
setState异步更新
- setState修改值之后不能立即访问,值的更新是异步的;
- 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的;
- 最好的办法应该是获取到多个更新,之后进行批量更新
- 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步;
- state和props不能保持一致性,会在开发中产生很多的问题;
setState之后如何立即获取到值呢?
两种方法:
- 利用setState的回调函数:
//方式一:获取异步更新后的数据
//setState(要更新的state对象,回调函数)
this.setState({
message: "2021的征途是星辰大海"
},() => {
console.log(this.state.message);
})
- 利用生命周期函数componetDidUpdate
componentDidUpdate() {
console.log("componentDidUpdate",this.state.message)
}