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需要写在函数组建的内部

posted @ 2025-03-29 22:11  奔付山河  阅读(24)  评论(0)    收藏  举报