附录1-分析setState()

目录

1  异步执行

1.1  异步验证

1.2  连续两次执行setState()

1.2.1  不会达到顺序执行的效果

1.2.2  只触发一次render()

2  第一个参数可以为函数

3  可以接回调函数

---

1  异步执行

1.1  异步验证

setState()是异步更新数据的，异步实际就是不按顺序执行

• JS本身就是异步的，异步相比与同步执行起来快一些，但写的时候就麻烦一点

我们在更改后进行打印

如果是1，表示先执行了setState()再执行console.log()

如果是0，表示setState()与console.log()没有按照书写顺序来走

打开后是这样的

点击一次后发现显示的是0

结论是setState()的执行顺序与书写顺序没有关系

1.2  连续两次执行setState()

1.2.1  不会达到顺序执行的效果

我们这个时候就要注意，不要在没有先后顺序的时候操作state，比如我加两次count

按了一次，发现state的结果还是1

1.2.2  只触发一次render()

打开后

点击一下

2  第一个参数可以为函数

当参数为回调函数的时候，可以连续使用setState()

打开后

发现可以执行两次setState()，但由于是异步，不能加后就获取值，只触发一次render()

如果想使用的话可以在函数中使用state，那个就是最新的值

3  可以接回调函数

回调函数会在页面完成渲染后执行，无论setState有多少个，页面只渲染一次，所以回调函数只会执行最后一次

• 一般不会使用多个setState)()，都可以使用函数了，直接在函数中处理就好了

打开是这样的

点击一次后