526互联

react项目中state和useState

发布时间 2023-03-23 16:18:08作者: 抽风的皮鞭

1. 在类组件中，数据保存在state中，更新数据使用setState

setState有两种用法

函数式

state={
  count:0
}
...
setState(state=>(count:state.count+1))

对象式

state={
  count:0
}
...
setState({count:2})

当新数据依赖原数据来进行计算的话使用函数式

当新数据不依赖原数据的话使用对象式

setState的更新时异步的，要想拿到更新后的值，可以在setState传入回调函数，当更新完成会触发回调函数，在回调函数中可以拿到更新后的值

state={
  count:0
}
...
setState({count:2},()=>{
   console.log(this.state.count); // 2 
})
console.log(this.state.count); // 0

更新对象的某个属性值

state = {
  obj:{
      a: 1,
      b: 2          
  }  
}
...
setState({obj: {...this.state.obj,b:2}},()=>{
    console.log(this.state.obj); // {a: 1, b:2}
})

 

2. 在函数组件中，使用useState保存数据

useState返回一个数组，接收的参数可以是一个具体的值，也可以是一个函数

import {useState} from 'react';

const [data,setData] = useState(()=>{return 0}) //可以在初始化变量的时候添加逻辑代码
// 或
const [data,setData] = useState(0)
...
// 更新数据
setData(1)
...
// 更新对象的某个属性值
const [data,setData]=useState({a:1,b:1})
setData({...obj,b:2})