React-setState修改状态

由于react状态不可变，所以在react中不要直接修改 state 中的值，这是无效的！
例如：

语法：this.setState({ 要修改的部分数据 })

setState() 作用：1 修改 state 2 更新 UI
例如：

setState 是哪来的？
从 Component 父类继承过来的

// 只要是数组中直接修改当前数组的方法都不能用！
this.state.list.push(123) // 错误
// 正确
this.setState({
  list: [...this.state.list, 4],
})

this.state.obj.name = 'haha' //错误
// 正确
this.setState({
  obj: {
    ...this.state.person,
    // 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了
    name: '嘻嘻'
  }
})

setState推荐语法

setState((prevState) => {})
参数 prevState：表示上一次 setState 更新后的状态

this.setState((prevState) => {
  return {
    count: prevState.count + 1
  }
})

setState进阶-同步

• setState如果是在react的生命周期中或者是事件处理函数中，表现出来为：延迟合并更新（“异步更新”）
• setState如果是在setTimeout/setInterval或者addEventListener声明原生事件中，表现出来是：立即更新（“同步更新”）
• 但是setState是同步更新的