当前位置：首页 > React

react如何清理

2026-02-11 14:13:28React

清理 React 组件或应用的方法

卸载组件时清理副作用
使用 useEffect 钩子的清理函数，在组件卸载时取消订阅、清除定时器或释放资源。例如：

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

清理全局事件监听器
在组件中添加的全局事件监听器（如 window.addEventListener）需在卸载时移除：

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

取消未完成的异步请求
使用 AbortController 终止未完成的 fetch 请求：

react如何清理

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

清理第三方库实例
某些库（如 D3.js 或 WebSocket）需手动销毁实例：

useEffect(() => {
  const chart = d3.select("#chart").draw();
  return () => chart.destroy();
}, []);

重置状态或表单
通过设置初始值或调用表单的 reset 方法清理用户输入：

react如何清理

const [formData, setFormData] = useState(initialState);
const handleReset = () => setFormData(initialState);

清理缓存或本地存储
移除 localStorage 或 sessionStorage 中的数据：

useEffect(() => {
  localStorage.setItem('key', 'value');
  return () => localStorage.removeItem('key');
}, []);

优化内存泄漏
避免在已卸载的组件中更新状态，可通过标志变量检测组件是否挂载：

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

标签: react