首页 > 其他分享 >React 组件销毁时清除订阅、定时器以及清理异步操作和取消请求等资源

React 组件销毁时清除订阅、定时器以及清理异步操作和取消请求等资源

时间:2022-11-02 13:45:00浏览次数:96  
标签:异步 定时器 React 销毁 组件 useEffect setState

问题

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

警告:无法对未安装的组件执行 React 状态更新。 这是一个空操作,但它表明您的应用程序中存在内存泄漏。 要解决此问题,请在 useEffect 清理函数中取消所有订阅和异步任务。

解决办法:清除 effect

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

react 组件销毁时 清理异步操作和取消请求

在componetWillMount 中访问了接口返回数据后,调用了setState,访问的时候按了后退,导致还没收到响应就销毁了组件 ,但是fetch请求没被结束掉,之后收到响应就调用了setState(),发出如上所示警告。

原因:React中,因为异步操作的关系,组件销毁后调用了 setState();

使用 class 组件解决办法:

componentWillUnmount(){
        // 卸载异步操作设置状态
        this.setState = (state, callback) => {
            return;
        }
    }

————————————————
原文链接:https://blog.csdn.net/qq_44721831/article/details/123137841

标签:异步,定时器,React,销毁,组件,useEffect,setState
From: https://www.cnblogs.com/frank-zhang/p/16850740.html

相关文章

  • 深入分析React-Scheduler原理
    关键词:reactreact-schedulerscheduler时间切片任务调度workLoop背景本文所有关于React源码的讨论,基于Reactv17.0.2版本。文章背景工作中一直有在用React......
  • 经常被问到的react-router实现原理详解
    在单页面应用如日中天发展的过程中,备受关注的少了前端路由。而且还经常会被xxx面试官问到,什么是前端路由,它的原理的是什么,它是怎么实现,跳转不刷新页面的...一大堆为什么,......
  • 深度讲解React Props
    一、props的介绍当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。函数声明的组件,会接受一个props形参,获取属性传递......
  • 前端面试指南之React篇(二)
    react中这两个生命周期会触发死循环componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发,因此不能再这两个生命......
  • React的useLayoutEffect和useEffect执行时机有什么不同
    我们先看下React官方文档对这两个hook的介绍,建立个整体认识useEffect(create,deps):该Hook接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这......
  • 前端面试指南之React篇(一)
    组件之间传值父组件给子组件传值在父组件中用标签属性的=形式传值在子组件中使用props来获取值子组件给父组件传值在组件中传递一个函数在子组件中用props来获取......
  • React循环DOM时为什么需要添加key
    一、React渲染流程和更新流程react渲染流程:jsx->虚拟dom->真实domreact更新流程:props/state改变->render函数重新执行->生成新的虚拟dom树->新旧虚拟dom树进......
  • 用定时器中断,单片机中断服务程序动作的处理时间大于定时器定时时间会怎样?
    单片机中断处理时间大于定时器定时时间,在下次中断时间到时,因为中断是同一类型、同一优先级,所以不会马上进入新的中断处理。而是在本次中断处理结束后,单片机又马上进入新的......
  • ajax的请求,异步,同源策略的学习
    AjaxAjax即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax是⼀种⽤于创建快速动态⽹⻚的技术。Ajax是......
  • javascript异步编程之generator(生成器函数)与asnyc/await语法糖
    Generator异步方案相比于传统回调函数的方式处理异步调用,​​Promise​​最大的优势就是可以链式调用解决回调嵌套的问题。但是这样写依然会有大量的回调函数,虽然他们之间......