React state用法 异步总结

setState用法

基本使用

this.setState({message:'message'})

函数式使用

this.setState((state,props)=>{
    //可加入修改数据之前的一些数据处理逻辑
    return{message:"message"}
})

• 可加入修改数据之前的一些数据处理逻辑
• React会自动把state,props作为参数传递进来

异步操作（批处理）

this.state={message:"初始数据"}
this.setState({message:'修改后数据'})
console.log(this.state.message)  #  初始数据

• 之所以会这样 是因为 设置值的时候 是异步操作

• 如果想获取修改后的数据可这样用

  • this.state={message:"初始数据"}
    this.setState({message:'修改后数据'},()=>{
        console.log(this.state.message)  #  修改后数据
    })
    

为什么设计为异步？

• 设置为异步操作 可以显著提升性能
  • 如果每次改变state 都会执行render函数 那么界面就重复渲染 效率是很低的
  • 异步将state改变加入队列当中 批量去调用render 那么render只会被调用一次
• 如果设置为同步 可能会出现
  • 数据发生修改 但是render函数并未调用完成
    • 那么传递给子组件的props依旧为原来的值，就会造成state和props不同步的问题
    • state和props不一致 在开发中很容易造成不可知问题

同步情况 React 18 之前

• 以下三种操作React并不会进行批量异步处理（18之前）

  • setTimeout，
  • Promise，
  • 原生

• 18之后 全部都会被加入react异步处理队列当中 进行批处理

强制同步更新 不进行批处理

import {flushSync} from "react-dom"

flushSync(()=>{
    this.setState({
        message:"new message"
    })
})

知识点

• React中并没有实现类型Vue2中的Object.defineProperty和Vue3中的proxy的方式去监听数据的变化
• 必须通过setState去告知React数据发生了变化
• setState是从Component中继承过来的