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