React中onChange内使用setTimeout的异常行为原因探究

首先要明确：你在onChange事件处理函数里返回的清理函数根本不会被React执行。React的事件处理函数不需要返回任何内容，这个返回值会被直接忽略，所以每次输入字符时，你都会创建一个新的2秒定时器，但之前的定时器完全没被清除，一直留在任务队列里。

那为什么会出现“开始输入后2秒只触发一次，值是最后一个”的现象？分两点说明：

• React合成事件池化：React的合成事件对象会被复用，事件处理函数执行完毕后，e的属性会被清空。你在setTimeout里直接使用e.target.value，本来应该拿不到正确值，但能看到最后一个值，是因为多次输入时，后续事件复用了同一个e对象，最后一次输入的value覆盖了之前的内容，等定时器执行时，读到的就是最后一次的value。正确的做法是在事件处理函数里先把值存下来：const value = e.target.value，再在定时器里使用value，避免事件池化的影响。
• 定时器堆积与状态覆盖：实际上每个定时器都会执行，都会调用onInputChange更新状态，但状态更新是异步的，后面的状态更新会覆盖前面的结果，所以你看起来像是只触发了一次，实际是多次触发但最终结果被最后一次覆盖了。

再说说为什么用useEffect就能正常实现需求：
你应该是把输入值存在了组件的状态里，然后用useEffect监听这个状态的变化。useEffect的返回函数会在下一次effect执行前或者组件卸载时被自动调用，所以每次输入新字符（状态变化）时，都会先清除上一次设置的定时器，再创建新的2秒定时器。这样就只会保留最后一次输入对应的定时器，完美实现“最后一个字符输入2秒后执行动作”的防抖效果。

内容的提问来源于stack exchange，提问作者Vladislav Maksimov