一、【React拓展】setState 的2种写法

1、 首先明确一点：异步

• setState 触发react后续更新的动作是异步的
  • 什么意思？
    • 就是比如此时 a=1，你直接在 setState({a: a + 5}) 后直接获取 a 的值其实还是 1 而不是6
  • 那怎么获取更新后的值？
    • setState可以接收两个参数 setState(stateChange, [callback])，第二个可选参数就是回调， 它在状态更新完毕、界面也更新后(render调用后)才被调用
    • 在回调里获取的 a 的值才是 6

change = a =>{ // 加入传入的a=1
    this.setState({a: a+5},()=>{
        console.log(this.state.a) // 6
    })
    console.log(this.state.a) // 1
}

2、setState 函数式写法

setState(updater, [callback])------函数式的setState

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

change = a =>{ // 加入传入的a=1
    // 【A】：在这里通过state和props做处理也一样。。。
    this.setState(
	(state, props)=>{
        // 可以做一些处理。。。其实在外面【A】处做也一样。。。
        return {
            a: state.a + 5
        }
    },
	()=>{
        console.log(this.state.a) // 6
    })
    console.log(this.state.a) // 1
}

3、总结

3.1、setState 的2种写法

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

3.2、概括

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