reactjs - 使用useState多次setState但只触发一次？

Question

 import "./styles.css";
 import React, { useState, useEffect } from "react";

 export default function App() {
  const [count, setCount] = useState(0);
   useEffect(() => {
    console.warn("render");
   });
  function btnClick() {
     setCount(count + 1);
     setCount(count + 1);
  }

return (
<div className="App">
  {count}
  <button onClick={btnClick}>Click Me</button>
</div>
);
}

按钮点击只增加1，而不是增加2，也渲染一次。useState有什么具体行为吗？

Answer 1

这是因为两个 setCount 读取相同的值(在单个渲染周期中)并且结果相同的值(实际上， react 将两个更新批处理为单个更新并忽略第二个更新，因为它与第一次更新的输出相同)。

为了保证获得更新的值，请使用带有 setCount 的回调更新程序函数(这些更新也会批量化为单个更新以优化渲染，但会给出正确的增量值 - 这意味着 React 确实会增量首先将该值设置为两倍，然后设置该值以避免两次渲染)。

function btnClick() {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
}

Code Sandbox