清理操作

清理操作用于移除副作用，如定时器、事件监听、watch 清理函数等。

定时器清理

function Timer() {
  let timer;
  didMount(() => {
    timer = setInterval(() => {}, 1000);
  });
  willUnmount(() => clearInterval(timer));
  return <div>定时器已启动</div>;
}

事件监听清理

function Listener() {
  function onResize() {}
  didMount(() => window.addEventListener('resize', onResize));
  willUnmount(() => window.removeEventListener('resize', onResize));
  return <div>监听窗口大小</div>;
}

watch 清理函数

function Watcher() {
  let timer;
  watch(() => {
    timer = setInterval(() => {}, 1000);
    return () => clearInterval(timer);
  });
  return <div>watch 清理</div>;
}

最佳实践

• 所有副作用都应有清理逻辑
• 推荐统一在 willUnmount/didUnmount 或 watch 清理函数中处理

注意事项

• 避免遗留定时器、事件监听等，防止内存泄漏

相关链接

• 卸载阶段