setState的函数用法

Posted 2023-03-16

参考技术A React中使用this.setState的对象用法时，不会立即改变组件中state的值

这就会导致下面的操作达不到字面上直观的效果。
字面上看，调用incrementMultiple，应该会导致state加了3，实际上只增加了1。

这是因为，this.setState并没有立即更改this.state，所以三次操作都在反复设置同一个值。

this.setState还可以接受一个函数作为参数。
React官网上说，这个函数接收两个参数，第一个是当前的state，第二个是当前的props，函数返回一个对象，与之前使用this.setState的返回对象相同，代表想对state的更改。

从上面的描述，我读到的两个意思，一个是：把一个函数作为参数传给this.setState，那这个函数不管叫什么，他都有两个入参；第二个是：这个函数的第一个参数是当前的state,第二个参数是当前的props，不管他们叫什么。

用着试试吧，把这个入参打印出来，入参就顽皮地叫做cc吧

点击一次按钮，确实实现了累加两次的效果，从控制台的打印也可以看出来，入参cc是一个state对象，并且每次调用plusone之前，cc都合并了之前的状态修改结果。

这样一来，用函数方式来使用setState，就更符合直观的逻辑了

参考：
setState：这个API设计到底怎么样
State and Lifecycle