React学习笔记七——setState

62 阅读1分钟
this.setState([partialState],[callback])
    [partialState]:支持部分状态更改
        this.setState({
            x:100 //不论总共有多少状态,我们只修改了x,其余的状态不动
        });
  [callback]:在状态更改/视图更新完毕后触发执行「也可以说只要执行了setState,callback
    一定会执行」
 + 发生在componentDidUpdate周期函数之后「DidUpdate会在任何状态更改后都触发执行;而
 回调函数方式,可以在指定状态更新后处理一些事情;」
 
 + 特殊:即便我们基于shouldComponentUpdate阻止了状态/视图的更新,DidUpdate周期函数
 肯定不会执行了,但是我们设置的这个callback回调函数依然会被触发执行!!
 
 + 类似于Vue框架中的$nextTick!!

在React18中,setState操作都是异步的「不论是在哪执行,例如:合成事件、周期函数、定时器...」但是在React16中setState只在周期函数和合成事件中是异步的,其他中都是同步的。

//可以杀心updater更新队列,让修改状态的任务立即刷新一次
import { flushSync } from "react-dom";

flushsync()/flushsync(()=>{xxxxx})
state={
   x:0
}
this.setState((prevState)=>{
  prevState:之前的值
  return的对象就是我们想要我修改的值
  return {
    xx:prevState.x+1  //可以拿到每次更新前上一次的值
  }
})