React中useState修改状态的规则

        在现今的react中我们修改状态需要借助useState这个函数，但是使用它的时候我们要遵守它的使用规则。

---

状态的修改规则

在React中状态被认为是只读的,我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新

 如下在修改count的值时，直接修改无法实现页面更新

const [count, setCount] = React.useState(1)
const addCount = () => {
//直接修改 无法实现页面的更新
    count++
}

我们需要借助setCount实现页面更新

const [count, setCount] = React.useState(1)
const addCount = () => {
// 用传入的新值替换掉旧值
    setCount(count+1)
}

此时有人会想count+1不如count++来的容易，但是我们要知道count++的值是等于原变量的值，只有++count的值是等于自增后的值。同时定义count时要使用let

// 使用let
let [count, setCount] = React.useState(1)
const addCount = () => {
// 使用++count 实现更新
    setCount(++count)
}

---

修改对象状态

对于对象类型的状态变量，应该始终给set方法一个全新的对象来进行修改

const [obj, setObj] = React.useState({ name: 'tom' })
const changeName = () => {
// 直接修改原对象 不引起试图变化
    obj.name = 'jack'
    console.log(obj.name) //jack
}

正确写法

const [obj, setObj] = React.useState({ name: 'tom'，age:18 })
const changeName = () => {
// 调用set传入新对象用于修改
    setObj({
        ...obj,
        name:'jack' // 直接替换原先name值
    })
}