为何useEffect返回的清理函数提前执行？组件日志异常求解

你这里的核心问题是useEffect的清理函数写法错误。

在你的Slider.tsx代码里，useEffect的返回值直接写了return store.destroy()，这会导致：

• 组件挂载时，执行store.init()后，立刻调用store.destroy()并返回它的返回值（此处为undefined），所以控制台会连续输出i init和i destroyed。
• 当组件卸载时，因为没有返回真正的清理函数，所以不会执行任何操作，也就没有日志输出。

正确的写法应该是返回一个函数，这个函数会在组件卸载时被调用：

const [store] = useState(() => new SliderStore())
useEffect(() => {
  store.init()
  // 返回一个函数，组件卸载时执行该函数
  return () => store.destroy()
}, [])

修改后，组件挂载时只会执行store.init()输出i init，当你离开组件（组件卸载）时，才会执行store.destroy()输出i destroyed，完全符合你的预期。

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