useState修改状态的规则

我们都知道,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'
  })
}