react的this.setState详细介绍

Posted 2020-11-26 alsohui

this.setState是react类组件中最常用的一个react API，使用它可以改变state从而改变页面。今天我们就来详细的学习一下这个东西。
比如：

import React, { Component } from react;

export default class Test extends Component {
constructor() {
super()
this.state = { 
count: 0,
}
}
render() {
return (
<div>
您的点击数：{this.state.count}
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
点击数+1
</button>
</div>

 

这样当你每点击button按钮一次，上面的点击数就会+1
但是this.setState还有很多的知识点你没有了解，真正项目当中可能会出现很多你不理解的bug。
比如说：

this.setState是异步的
在你调用了this.setState后在他的下面输出他的结果还是没变的状态

this.setState({ count: this.state.count + 1 })
console.log(this.state.count)    //结果还是之前的，而不是+1之后的

 

this.setState的第一个参数可以是一个对象，也可以是一个函数返回一个对象，函数的参数是上一次的state
示例：

this.setState((prevState) => ({ prevState.count + 1 }));

 

this.setState的第二个参数是它的回调函数，在前面重新给state赋值后执行
示例：

this.setState({
count: this.state.count + 1,
}, () => console.log(this.state.count)) //结果是+1之后的count

 

连续调用this.setState的结果
示例：

this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })

 

虽然调用了三次 setState ，但是 count 的值还是为 1。因为多次调用会合并为一次，只有当更新结束后 state 才会改变，三次调用等同于如下代码

Object.assign( 
{},
{ count: this.state.count + 1 },
{ count: this.state.count + 1 },
{ count: this.state.count + 1 },
)

 

如果想让最后的结果等于3请用上面介绍的this.setState()的参数为函数返回对象的形式。
或者像下面这样：

额外注意点

但是如果把上面的代码改装一下效果就不一样了

setTimeout(() => {
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
}, 100)

这时候这三次都会被执行到。

原因是因为React的更新策略没有被触发到。

原文链接：https://blog.csdn.net/weixin_43606158/article/details/94356884