case1 和 case2 有什么区别?
const [a, setA] = useState(0);
setA(a + 1); //case 1
setA(a => a + 1); //case 2
case1 和 case2 有什么区别?
const [a, setA] = useState(0);
setA(a + 1); //case 1
setA(a => a + 1); //case 2
setA(a + 1);
将从a
当前机箱的 值更新。setA(a => a + 1);
将从前一个状态的值更新尝试将其中一个的多个入队并查看差异。
const clickHandler1 = () => {
// assume count equals some number n
setCount(count + 1); // update queued, count === n, count = n + 1
setCount(count + 1); // update queued, count === n, count = n + 1
setCount(count + 1); // update queued, count === n, count = n + 1
// when processed the count will be n + 1
};
const clickHandler2 = () => {
// assume count equals some number n
setCount((count) => count + 1); // update queued, count === n + 0, count = prevCount + 1
setCount((count) => count + 1); // update queued, count === n + 1, count = prevCount + 1
setCount((count) => count + 1); // update queued, count === n + 2, count = prevCount + 1
// now when processed each call uses the result of the previous update
// count will be n + 1 + 1 + 1, or n + 3
};
如果下一个状态取决于任何先前的状态,您应该使用功能状态更新。当包含在间隔或数组循环中更新状态的回调时,功能状态更新也很方便。
请参阅此工作演示:
当您的新状态依赖于以前的状态时,情况 2 是必需的。
情况 1 可能会导致不正确的行为,因为这是异步的,并且可能会更新 a.