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