react用useEffect防止数据内存泄漏

函数式

1、创建了一个定时器,你需要在组件卸载时清理:

javascript 复制代码
useEffect(() => {
  const id = setInterval(() => {
    console.log('Hello');
  }, 1000);
  return () => {
    // 组件卸载时执行
    clearInterval(id);
  };
}, []); // 空依赖数组意味着仅在组件挂载时运行一次

2、确保初始化函数initData不会在组件卸载后继续执行。

javascript 复制代码
  useEffect(() => {
    let unmount = false;
    (async () => {
      if (!unmount) {
        initData();
      }
    })();
    return () => {
      unmount = true;
    };
  }, [initData]);

Class

javascript 复制代码
  componentWillUnmount = () => {
    this.setState = () => false;
  };
相关推荐
蚂蚁集团数据体验技术7 分钟前
一个可以补充 Mermaid 的可视化组件库 Infographic
前端·javascript·llm
LQW_home16 分钟前
前端展示 接受springboot Flux数据demo
前端·css·css3
q***d17322 分钟前
前端增强现实案例
前端·ar
IT_陈寒22 分钟前
Vite 3.0 重磅升级:5个你必须掌握的优化技巧和实战应用
前端·人工智能·后端
JarvanMo27 分钟前
Flutter 3.38 + Firebase:2025 年开发者必看的新变化
前端
Lethehong36 分钟前
简历优化大师:基于React与AI技术的智能简历优化系统开发实践
前端·人工智能·react.js·kimi k2·蓝耘元生代·蓝耘maas
华仔啊1 小时前
还在用 WebSocket 做实时通信?SSE 可能更简单
前端·javascript
鹏北海1 小时前
多标签页登录状态同步:一个简单而有效的解决方案
前端·面试·架构
_AaronWong1 小时前
基于 Vue 3 的屏幕音频捕获实现:从原理到实践
前端·vue.js·音视频开发
孟祥_成都1 小时前
深入 Nestjs 底层概念(1):依赖注入和面向切面编程 AOP
前端·node.js·nestjs