useState修改状态的规则

2023-10-28 分类：站长随笔 评论(0)

我们都知道，useState的作用是给我们的组件添加状态变量，通过状态变量的变化来驱动视图的变化。（也就是所谓的「数据驱动视图」）

但是，这个状态变量的状态可不是随意修改的，它是有一定规则的，这篇文章就来讲一下useState修改状态的规则。

这条规则总结为五个字其实就是「状态不可变」

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它。

我们可以试着去直接修改状态，但是这个操作并不能引发视图更新。

来个错误的示范：

let [count, setCount] = useState(0)

const handleClick = () => {
  // 直接修改count 无法引发视图更新
  count++
  console.log(count)
}

这个例子，在回调函数里面，直接对状态变量count做了++操作。

改是能改，但是，视图不会跟着一起更新。

正确的做法是：

const handleClick = () => {
  // 用传入的新值修改count
  setCount(count + 1)
}

刚才讲的是「简单数据类型」的修改，下面讲一下「复杂类型」的修改。

复杂类型，无非就是「对象」呗。

当我们要修改对象类型的状态变量时，同样也要遵循「状态不可变」的规则。

我们不能直接修改这个对象，而是传给set方法一个全新的对象来进行修改。

直接修改原对象，不会引发视图更新：

const [form, setForm] = useState({
  name: 'jack'
})

const handleChangeName = () => {
  form.name = 'john'
}

得这样做：（调用set方法传入新的对象用于修改）

const [form, setForm] = useState({
  name: 'jack',
})

const handleChangeName = () => {
  setForm({
    ...form,
    name: 'john'
  })
}

相关推荐