React 状态更新机制

state

setState的三种用法

1. //基础用法,直接传入对象，底层使用assign进行合并
   setState({
   message:"hello world"
   })

//传入一个回调函数，函数返回一个对象
setState((state,props)=>{
//这里的state，已经是前面处理过的，更新了数据的state，如果有多个的setState的话
return { message:"hello world"}
})

//可以传入第二个参数，state更新后的回调
setState({message:"hello world"},()=>{
console.log("--state数据已经更新--",this.state)
})

setState是同步还是异步？

1. 在react18之前：非react事件回调，是同步的更新，如
2. setTimeout(()=>{
   this.setState({
   })
   //这个setState是同步执行的
   })
3. 在react18之后，所有setState都是异步的。
4. react18之后，setState变成同步的方式：
5. //使用flushSync，先要从react-dom导入
   import { flushSync } from 'react-dom';

flushSync(()=>{
this.setState({})
//这个setState是同步执行的
})

异步的好处，或者为什么要做成异步更新的？

• 可以批量更新，提高性能

同一个事件内，多次执行setState，数据会被依次放到一个队列中并且依次合并，最后才会执行render更新，提高了性能

• 保持数据一致性

如果是同步的方式，每次setState立即同步更新state数据，而继续往下执行之后执行render的话，会导致state的数据和子组件中的props的数据不一致，从而导致更多的问题