useState的定义
const [state, setState] = useState(initialState);
返回一个 state,以及更新 state 的函数。
在初始渲染期间,返回的状态 (state
) 与传入的第一个参数 (initialState
) 值相同。
setState
函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
useState的定义初始值的两种写法
写法一:
const [count, setCount] = useState(0);
写法二:
const [user, setUser] = React.useState(() => ({ name: '张三', age: '18' }))
两种写法的区别如下:
useState可以传入对象,但是js引擎会解析这个对象,计算9+9,造成多余的运算
useState可以传入一个函数,函数并不会执行
这样写的好处是js只会在初始化值的时候执行一次函数
之后就不会再查看这个函数
setState的两种写法
const UseState = (props) => {
const [count, setCount] = React.useState(0)
//写法一:直接修改值
const add = () => {
setCount(count+1) //第一种写法
setCount(count+1) //第一种写法,不能加2
}
//写法二:函数式更新
const addFn = () => {
setCount((count) => count + 1)
setCount((count) => count + 1)
}
return (
<div>
<h2>当前求和为:{count}</h2>
<button onClick={add}>点我+1</button>
<button onClick={addFn}>点我+1</button>
</div>
)
}
通过执行以上函数可以发现,函数式更新点击+1是可以直接+2的,但是直接修改值则只能+1
对state进行多次操作,建议使用函数写法,因为函数里的count始终是最新的值。
这里有个小知识点,setState是不可以局部更新的,如果对象里的属性只改了一个,那么会覆盖所有的属性
如下:
const UseState = (props) => {
const [user, setUser] = React.useState(() => ({ name: '张三', age: '18' }))
const changeUser = () => {
//setUser不可以局部更新,如果只改变其中一个,那么整个数据都会被覆盖,如下age会被覆盖掉
setUser({
name: '王五', //这里的name覆盖之前的name
})
}
return (
<div>
<button onClick={changeUser}>点我修改人员</button>
<h1>
{user.name} 年龄:{user.age}
</h1>
</div>
)
}
通过执行发现,age消失了,可以使用如下写法
setUser({
...user, //拷贝之前的所有属性
name: '王五', //这里的name覆盖之前的name
})