@sillydaddy #34
不小心发出去了。

截取了 20 多行打印，应该是验证了 @ruxuan1306 的说法：
每次 useEffect destructed 后面都紧跟着 useEffect called 。
count 值的交替变化，反映了这个复杂的异步流程，看着很烧脑。

```
re-rendered count=0
useEffect called. callback added, now count=0
callback called setcount called, count=0, set_count_to=0
callback called setcount called, count=0, set_count_to=2
re-rendered count=2
callback called setcount called, count=0, set_count_to=18
useEffect destructed. callback removed. closure's count=0
useEffect called. callback added, now count=2
re-rendered count=18
callback called setcount called, count=2, set_count_to=5
useEffect destructed. callback removed. closure's count=2
useEffect called. callback added, now count=18
re-rendered count=5
callback called setcount called, count=18, set_count_to=62
useEffect destructed. callback removed. closure's count=18
useEffect called. callback added, now count=5
re-rendered count=62
useEffect destructed. callback removed. closure's count=5
useEffect called. callback added, now count=62
callback called setcount called, count=62, set_count_to=62
re-rendered count=62
callback called setcount called, count=62, set_count_to=78
re-rendered count=78
callback called setcount called, count=62, set_count_to=66
useEffect destructed. callback removed. closure's count=62
useEffect called. callback added, now count=78
re-rendered count=66
```

@ruxuan1306 #30
我加了一些打印，试图验证你说的 React 的渲染帧过程：

打印 dom 上的 callback 执行时，对应的 count ，以及设置的新 count：
```
let callback = (ev:WheelEvent)=>{
console.log("callback called setcount called, count=" + count + ", set_count_to="+(count+Math.floor(Math.abs(ev.deltaY/5))));
ev.preventDefault();
```

打印 useEffect contruct 和 reconstruct ，以及分别对应的 count 值
```
el.addEventListener("wheel", callback, {passive:false});
console.log("useEffect called. callback added, now count="+count);
return (()=>{el.removeEventListener('wheel', callback); console.log("useEffect destructed. callback removed. closure's count="+count);} );
```


```
console.log("re-rendered count=" + count);
return (<div ref={wheel}>
{divs}
</div> );
```

@myl0204 您这个才是最小 demo

@Envov 加锁这个办法也不错。

@rabbbit 可以看 29 和 30 楼 @ruxuan1306 的解释

@ruxuan1306 非常感谢写下这么详细的分析！

@morelearn1990 #17 > “来用 vue3”
vue 是基于 MVVM 吧，虽然我把 react 和 vue 都当作黑盒来用，但 react 的黑盒似乎更透明些，vue(还有 mobx)有点 magic 的意味。假如遇到性能问题，还是 react 更好调试和优化。

@serco #18
是的，用 useRef 也可以解决，我再去学习学习。。

@serco > “。。在 callback 里面调用另一个真正需要执行的 function ， 这个 function 用 useCallback 来根据 count 生成。”
这个效果应该跟 useEffect 是一样的，dom 上的 callback 执行与 useCallback 执行不是 1:1 的。

“callback 里面用 setCount(count => ...)这种基于前值修改的方式。”
这种方式是可以，但有时很麻烦，比如说：
```
if(count %3 == 0) {};
if(count %3 == 1) setCount(pre=>pre+1);
if(count %3 == 2) setCount(pre=>pre+2);
```

if 语句里还是要读取 count 的最新值。用函数形式实现就很反直觉（本来是用 count 值来判断是否需要 setCount 的，现在必须调用 setCount 来获取 count 的最新值）：

setCount(pre=>{
if(pre%3==0) return ???
if(pre%3==1) return pre+1;
...
});

@shuding #9
callback 的重新创建，主要是希望能引用到最新的 count ，在最新 count 的基础上修改为新值。如果不重新创建 callback ，那 callback 闭包引用的 count 就是固定的旧值了。

@gydi > “数据量大的话，useEffect 的执行就没有 callback 频繁了吧”

我测试了一下，25000 条渲染和 50 条的情况下，2 者的执行次数确实有差异。
帧率高的时候 callback 和 useEffect 基本是交叉一次，偶尔有例外。帧率低时 callback 明显更频繁。

这确实解释了为什么帧率低的时候能明显发现这个问题。帧率高时可能是不明显。

现在发现这个问题，其实就是怎么在 hook 里获取某个 state 的最新值。useEffect 里面的回调要用某个 state 的话，那 useEffect 能提供的更新频率就不够了。

@TWorldIsNButThis #4 也有 remove 的操作啊
@westoy #7 我去了解下，这个看名字像是与 Dom 相关的吧。

@gydi
但是 callback 本身会修改 count ，count 变了的话，就会触 useEffect 。这样 useEffect 用到的不就始终是最新的吗？

@cyitao
我知道可以这样改，但为什么主题里的代码会出问题呢？问题出在哪里我没有想明白。

谢谢你的回答，不过如果只是为了寻找一个暂时的答案，我也不用整理最小 demo 发在这里询问大家了。

收藏了

@mufeng
嗯，看来回调的地方也要注意：lambda 表达式每次都是生成一个新的实例。

@otakustay
对的，应该是因为 type 一直在变

@maichael
原来如此！！一不注意又进了 lambda 的「陷阱」。。怪不得楼上都在说移到外面。

@luvsic 但为什么会 unmount 呢？难道所有的 re-render 都会 unmount 所有子组件？这不可能吧。

@withoutxx
是重新生成 SubComponent 啊，React 的 render 就是这个流程啊，但是为啥会 unmount 呢？

按我的理解，再次渲染时，父子组件的结构并没有变，就不应该 unmount 啊。

组件的结构⬇️
```
<Main>
...
<SubComponent />
</Main>
```