react中setState使用

一、setState的第一种用法,对象式的setState

这里有一段普通的代码,你可以猜猜两处count的值,并思考为什么
react中setState使用_第1张图片
结果如下
在这里插入图片描述
setState方法可以说是同步的,但是其修改状态却是异步的。setState的第二个参数是一个callback函数,它会在react修改状态,并重新render之后进行调用。所以说,第11行的值为0,第9行的值为1。

二、setState的第二种用法,函数式的setState

setState可以接收到两个参数,第一个参数为updater。而updater可以接收到state以及父组件传过来的参数props,第二个为回调函数
react中setState使用_第2张图片
以下为结果
react中setState使用_第3张图片

如果不需要父组件传过来的参数可简写
react中setState使用_第4张图片

三、总结

  1. 对象式的setState是函数式的setState的简写方式(语法糖)
  2. 如果新状态不依赖于原状态,使用对象方式,反之则使用函数方式
  3. 如果需要在setState()执行后获取最新的状态数据,要在第二个callback函数中读取

你可能感兴趣的:(react.js)