当前位置：首页 > React

react如何清理

2026-03-30 17:11:19React

清理 React 组件的方法

卸载组件时清理副作用
使用 useEffect 的清理函数，在组件卸载时执行清理操作（如取消订阅、清除定时器等）。示例代码：

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer); // 清理函数
}, []);

清理事件监听器
在 useEffect 中添加事件监听后，需在清理函数中移除。示例：

useEffect(() => {
  const handleResize = () => {};
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

取消网络请求
使用 AbortController 终止未完成的请求。示例：

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then(response => response.json());
  return () => controller.abort();
}, [url]);

清理 ref 引用
对于手动创建的 ref 或第三方库实例，在卸载时重置或销毁。示例：

useEffect(() => {
  const instance = new ThirdPartyLib();
  return () => instance.destroy();
}, []);

清理状态和数据的建议

重置组件状态
通过条件渲染卸载组件时，父组件可通过传递新的 key 强制重置子组件状态：

<ChildComponent key={uniqueKey} />

避免内存泄漏
确保异步操作（如 Promise）在组件卸载后不再更新状态。示例：

react如何清理

useEffect(() => {
  let isMounted = true;
  fetchData().then(data => {
    if (isMounted) setState(data);
  });
  return () => { isMounted = false };
}, []);

标签: react