react Hooks 陷阱

  • react 函数组件 + hook 为我们带来了，很多的方便，但同时也会遇到一些陷阱

  • hooks必须在函数顶层 ，不能在条件分支内 ，那么你踩到了那些坑 ？

1、useState 陷阱

陷阱：【异步陷阱】

function Index() {const [count, setCount] = useState(0);function add(){setCount( count + 1 );console.log(count);  // 0}return (<div><span>{count}</span><button @click=()=>{ add() }> + </button></div>);
}
  • 点击添加按钮，发现值更新了，打印的值却还是上次的
  • 什么 useState 修改状态 是异步

解决方法：