react项目中state和useState

我们在类组件中实现状态管理使用state，在函数式组件中实现状态管理则是使用useState（hook）。

state和useState都是异步更新数据，都可以触发视图更新。

1. 类组件

数据保存在state中，更新数据使用setState

setState有两种用法

函数式

state={
  count:0
}
...
setState(state=>{return {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})

 useState的更新也是异步的，如果要拿到更新后的数据可以使用如下方法：

const [coun,setCount] = useState(0);
...
// 1. 使用useEffect监听count变动
useEffect(()=>{
    console.log(count); // 1
},[count])
...
// 2. 更新方法传入一个函数，在return最新数据之前先拿到新数据
setCount((count)=>{
   count++;
   console.log(count); // 1
   return count;  
})