阅读Build your own React这篇文章时遇到的问题：它和使用真实的react在某些时候执行结果不同，到底是因为什么？

Question

阅读Build your own React这篇文章时遇到的问题：它和使用真实的react在某些时候执行结果不同，到底是因为什么？

文章链接

分别使用文章中实现的react和真实的react来实现一个组件，该组件包括一个h1，点击h1数字会增加。连续点击该组件两次，看它们的
执行结果。

1. 利用文章中实现的react实现该组件。完整代码

function Counter() {
  const [state, setState] = Didact.useState(1);
  return (
    <h1 onClick={
      () => {
          setState(c => c + 1)
          setTimeout(() => setState(c => c + 2), 3000)
      }
      
      
      } style="user-select: none">
      Count: {state}
    </h1>
  );
}
const element = <Counter />;
const container = document.getElementById("root");
Didact.render(element, container);

结果：
数字只加1，并没有再加2。

1. 利用真实的react来实现 完整代码

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
      <h1 onClick={() => {
       setNumber((c) => c + 1)
       setTimeout(() => setNumber((c) => c + 2), 3000)
      }}>
        Count {number}
      </h1>
  )
}

结果:
数字加1之后又加2了。

根据我对文章的理解， setTimeout(() => setNumber(c => c+2), 3000)所修改的Intial render中对应fiber中的hook，而不是在setNumber(c => c + 1）所触发的render中相对应的fiber中的hook，因为两个setNumber都是在initial render时在useState中定义的，我们并没有改变setNumber(c => c+1)所产生的fiber树，即上一次render产生的树，对比是发生在当前正在渲染的树和上一次产生的树之间的，两者并没有发生改变，所以只加了1没有再加2。我还画了图帮助理解。但是为什么react既加了1又加了2，我不知道是为什么？两者之间有什么区别？如果第二次渲染复用了第一次渲染的某些fiber节点，那么第二个setNumber是可以改变UI的？

Answer 1

我观察到setTimeout的更新函数被压入了上一次更新的queue中，即与onClick内的setState压入到同一个队列
而由于setTimeout内到setState触发更新时，上一次reconcile已经完成，本次处理的是alternate下的queue，而它是空的。
参考如下示意图：

从这个图也能看到由于你没有在更新后将alternate销毁，导致无限引用，点的次数多了，可能会爆内存。
大致的解决方向应该是在更新后将alternate销毁，在setState函数调用时，如果检测到已销毁，要尝试获取新的queue，而不是直接从闭包中拿