React-setState

setState更新状态的几种写法

1. 刚开始学习的时候，setState()里只有一个参数，且传入的是一个对象

2. 随着学习的深入，setState()还有另一个参数：回调函数

(1). setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

• setState()是同步的方法，但是setState()的引起React后续更新的动作是异步的
• 当在setState中声明了要改变的属性后，setState不会立马渲染到页面上，而是继续执行setState后续的方法，当其他方法执行完后，React才会将setState方法内修改的状态重新渲染到页面上，相当于异步渲染
• 如果在setState方法内部修改了属性值后，后续又立马获取该属性值，则获取的永远是setState前的值，因为React还没有真的执行属性的修改进而重新渲染页面
• 如果想要拿到最新的也就是setState引起属性变化后的状态，可以在callback函数内部获取
• 状态的异步更新是为了方便收集后续对状态的多个修改，进行优化，从而只重新渲染一次
• callBack方法的执行，是在状态更新，页面重新渲染之后执行的，这个时候是可以拿到最新的状态的

3. 上述setState的写法可以总结为对象式的setState，还有一种函数式的setState

(2). setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被

• 函数式的setState可以接收两个参数，分别是state和props，从而可以接收组件传值，也就是可以依赖其他组件或者其他方式的传值，对状态进行更新
  
• 之前的对象式的setState，需要先获取原来的state的值，再在其基础上进行更新，但是在函数式的setState中，state已经作为形参传入进来了，所以在函数式的setState中，可以不用获取当前state再进行更新

• 如果不需要接收参数，就可以继续优化，直至和对象式setState一样，所以对象式的setState是函数式的setState的简写方式

4. 总结

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