React基础 setState 有推荐语法

 setState 更新数据的特点

• 一般情况下，通过 setState() 方法来更新数据，表现是异步的
• 也就是说当执行 setState 这一行的时候，React 出于性能考虑，并不会马上进行调用来修改state
• 而是把这个以及后续的对象放到一个更新队列里面进行合并的操作，稍后才会从队列当中把合并后的数据取出进行setState 的操作
• 也就是多次调用setState(),只会触发一次重新渲染

常规

// 初始
state = { count: 1 }

// 更新
this.setState({
    count: this.state.count + 1,
})
// 输出
console.log(this.state.count) // 1
// 通过 DOM 也是不能马上获取的

合并

this.setState({
    count: this.state.count + 1,
})
this.setState({
    count: this.state.count + 2,
})
this.setState({
    count: this.state.count + 1,
})

执行过程：先排队，在把排队中的数据进行合并，执行最后1次的 setState 所以并不需要多次进行 setState 会带来性能问题

好处：性能高

问题：不能立刻拿到更新后的数据，多次进行 setState 会进行合并的操作

setState 推荐语法

• 推荐：使用 setState(preState()=>{}) 语法
• 参数 preState : 上一个 setState 的结果

// 初始
state = { count: 1 }

// 更新
this.setState((preState) => {
    return {
        // preState 1
        count: preState.count + 1,
    }
})

this.setState((preState) => {
    return {
        //preState 2
        count: preState.count + 2,
    }
})

// 输出
console.log(this.state.count) // 依然是 1 但显示 4

这种语法依旧是异步的，不同的是通过 preState 可以获取到最新的状态

 第二个参数

通过 setState 第二个参数可以立刻拿到更新后的数据

• 场景：在状态更新后，依靠更新后的状态立即执行某个操作
• 语法：serState(updater,[callback])

this.setState({}, () => {
    console.log('这个回调函数会在状态更新后立即执行')
})