useState使用注意事项
1.set函数会触发函数组件重新渲染,所以如果在渲染的过程中使用set函数会触发死循环
function Home() {
const [x, setX] = useState(0)
// 会触发死循环
setX(x + 1)
return <div>{ x }</div>
}
2.set函数是异步的
function Home() {
const [x, setX] = useState(0)
const handleClick = () => {
// 执行3次,渲染完成 x 是1,因为每一次读取的x是缓存的x,没有被更新
setX(x + 1)
setX(x + 1)
setX(x + 1)
}
return <div onClick={ handleClick }>{ x }</div>
}
function Home() {
const [x, setX] = useState(0)
const handleClick = () => {
// 执行3次,渲染完成 x 是3,因为每一次箭头函数中的x是更新后的x,不是缓存的x
setX(x => x + 1)
setX(x => x + 1)
setX(x => x + 1)
}
return <div onClick={ handleClick }>{ x }</div>
}
3.如何获取最新值
function Home() {
const [x, setX] = useState(0)
const handleClick = () => {
// 执行3次,渲染完成 x 是3,因为每一次箭头函数中的x是更新后的x,不是缓存的x
setX(x => {
// 最新计算后的x
console.log(`x is ${ x }`)
// 原值返回
return x
})
}
return <div onClick={ handleClick }>{ x }</div>
}
4.useState需要写在函数组建的内部