为什么setTimeout中的setState会被调用两次？

Question

我有两个状态变量，我在 func 函数中更新它们。我们知道组件中的每个渲染器都有自己的 setTimeout 。因此，当我在输入中快速写入文本时，我希望数字状态的结果为 1 once 。它的结果是 1 但它在 console 中记录了两次。为什么？

export default function Mycomponent() {
  const [number,setnumber] =useState(0);
  const [string,setstring] =useState('');
  function func(event){
     
    setstring(event.target.value);
    setTimeout(()=>{
      setnumber(number+1);
    },3000);
    // 1_ every render has own setTimeout  so when I write text fast in input  I expect that result of number be 1 once .
    // its result is 1 but it log twice in console. why ??? 
    

      
  }
  console.log(number,string);
  return (
    <>
      <input type='text'onChange={(e)=>{func(e)}} value={string}/>
      
    </>
  )
  
}

Answer 1

这记录在React 文档中。如果先前的状态值和新的状态值相同，React 可以退出渲染，但它可能必须重新渲染当前组件。它肯定会为孩子们保释我们，这就是为什么这不是性能问题。

请注意，React 在退出之前可能仍需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“更深入”到树中。

即使没有您只需更新数字的 setTimeout，也可以看到整个问题。

要验证以上内容，只需创建一个子组件并查看它是如何不重新渲染两次的。

export default function App() {
  const [number, setnumber] = useState(0);
  const [string, setstring] = useState("");
  function func(event) {
    setstring(event.target.value);
    setTimeout(() => {
      setnumber(number + 1);
    }, 3000);
    // 1_ every render has own setTimeout  so when I write text fast in input  I expect that result of number be 1 once .
    // its result is 1 but it log twice in console. why ???
  }
  console.log(number, string);
  return (
    <>
      <TestChild />
      <input
        type="text"
        onChange={(e) => {
          func(e);
        }}
        value={string}
      />
    </>
  );
}

游乐场