react中this.setState踩坑史

使用react中this.setState踩坑史@react

先介绍react中的state

简单来说，state就是我们在全局需要用到的一些数据的的声明以及值得初始化的地方，在state中声明过的属性，都可以全局使用它。（肤浅来说，本人觉得它和vue中data的作用有异曲同工之处）。还有就是state是可变的，它是用来反映组件状态的变化的，比如一个按钮，你点击了它之后，它所带来的影响就要通过state中的一些属性来具体实现。
使用state中的数据需要this.state.visible(你想使用的属性)

改变state中的属性的属性值 this.setState({}）

我们先想一下Vue中改变data的属性值，就是通过一个方法触发，然后在方法中改变，看下图

但是在react中就是需要来调用一步this.setState，看下图

重点来了！！！为什么没有改变state中的值，因为setState就相当于是一个异步操作，不能立即被修改
解决方法有以下几种：
第一种：使用一个回调函数来解决异步问题，
这种方式虽然可以解决问题，但是它也相当于直接修改了，所以我不推荐这种方法。

第二种，使用promise的语法糖async…await来变异步为同步
这种方法是我用的最多的而且也比较推荐大家用的。
由于本人能力有限，经常用的就这两种方法，当然还有其他更好的方法存在。

拓展部分

就是关于setState还有第二种格式，它接收一个回调函数，而不是一个对象，这个回调函数有两个参数，第一个是接收前的一个状态值，然后第二个时更新后的值

这个方法在处理逻辑比较复杂的情况下是非常好用滴！