react set(a) 和 set(a => a) 的差异

IT技术 reactjs react-hooks
2021-04-25 18:50:59

case1 和 case2 有什么区别?

const [a, setA] = useState(0);

setA(a + 1);      //case 1
setA(a => a + 1); //case 2
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
};

如果下一个状态取决于任何先前的状态,您应该使用功能状态更新。当包含在间隔或数组循环中更新状态的回调时,功能状态更新也很方便。

请参阅此工作演示:

编辑react - 定期和功能状态更新

当您的新状态依赖于以前的状态时,情况 2 是必需的。

情况 1 可能会导致不正确的行为,因为这是异步的,并且可能会更新 a.