react 组件卸载前需要清除的方法

最新推荐文章于 2023-05-11 17:14:34 发布
最新推荐文章于 2023-05-11 17:14:34 发布
阅读量3.4k 收藏 1
点赞数 1
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/107353416
版权 
在componentWillUnmount中处理

	1、定时器
		clearTimeout/clearInterval
		
	2、如监听滚动条的dom事件
		window.onScroll=null;
		
	3、网络请求
		当网速较慢时,发起网络请求还未接收到就跳转到其他页面
		原因是当离开页面以后，组件已经被卸载，执行setState时无法找到渲染组件。
		这里通过离开页面时重写setState方法且不返回任何数据来解决,使得组件中的setState方法无效
		this.setState=(state,callback)=>{
            return ;
        }

对应报错:
在这里插入图片描述

神奇大叔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
细说React组件性能优化
xiaofeng123aazz的博客
10-18 391
纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。person . name } 丨 {name : "张三" , job : "developer" });} , [ ]);
use-set-safe-timeout:提供“window.setTimeout”版本的 React 钩子可以清除卸载时的超时
05-29
消除了不必担心在 React 组件中手动清除卸载超时的开销。 特征 提供可以像window.setTimeout一样调用的回调。 调用时，返回一个可以调用以清除超时的函数（而不是返回超时 ID）。 在卸载时自行清除（因此，它是...
react-hoc-timerfuncs:通过道具提供的计时器功能可在卸载时自动清除自身
05-16
react-hoc-timerfuncs 此HOC（高阶组件）通过props提供了以下类似计时器的功能，这些组件将在卸载时自动清除。 可以与React和React Native一起使用。 setTimeout setInterval setImmediate requestAnimationFrame clearTimeout clearInterval 清除立即 cancelAnimationFrame 安装 yarn add react-hoc-timerfuncs 例子 // ... import timer from "react-hoc-timerfuncs" @ timer class Counter extends React . Component { state = { counter : 0 } render ( ) { r
hocs：React的高阶组件
02-05
集合的React，与特别有用。 高阶组件是一个接受组件并返回新组件的函数。 配套 普遍 :non-potable_water: 帮助省略不必要的上下文，状态设置器或其他您不想通过{...spread} 。 :recycling_symbol: 提供一种方便的方法来使用某些方法。 :hourglass_done: 有助于消除诸如onChange处理程序的抖动。 :hourglass_done: 有助于限制onChange处理程序。 :watch: 提供setTimeout ， setInterval ， requestAnimationFrame和requestIdleCallback安全版本，这些安全版本将在卸载组件之前自动清除/取消。 :bell: 在更改道具时调用回调，这有助于以声明方式将副作用（如onChange处理程序
react-rxjs-elements:RxJS内容的React组件
05-14
<$> 对RxJS内容进行React 只需添加一个Observable作为<$>的子代之一： < $ > { stream$ } < / $ > 或使用动态元素，例如$ img < $img src = { stream$ } / > react-rxjs-elements将订阅stream$并在适当位置显示其更新。 并且它将为您清除所有有关组件卸载的订阅。 尝试 :package: 安装 npm i react-rxjs-elements :open_book: 例子 一个简单的计时器- import React from 'react' ; import { timer } from 'rxjs' ; import { $ } from 'react-rxjs-elements' ; function App ( ) { return < $ > { timer ( 0 , 1000 ) } sec
React 组件销毁时清除订阅、定时器以及清理异步操作和取消请求等资源
kiku
02-25 4516
问题： 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. in GlobalHeaderRight (a
React Hook – 清理 useEffect
qq_34703156的博客
12-29 2218
** 今天我们将看到如何使用useEffect React Hook的清理函数。 当你更新卸载组件的状态时，React会抛出这样的错误: "无法在卸载的组件上执行React状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消componentWillUnmount方法中的所有订阅和异步任务。”** useEffect(() => { //Do all the job, for example, subscribe a websocket channel return fun
03-React-Hook
zhangjun133133的博客
11-23 881
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用。
react的性能优化建议
Cupid
03-16 1370
1. 组件卸载前进行清理操作 在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能 使用 useState 保存一个数值，然后开启定时器改变数值，卸载组件时清理定时器 import React, { useState, useEffect } from "react"; function UseState() { const [date, setDate] = useState(new Date()); useEffect(() =
[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？
歌谣的博客
11-20 1268
[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？ 定时器要在 componentWillUnmount 手动清除，直接绑定在JSX里的事件监听器不用，使用ref绑定的要清除 因为如果不清除定时器，组件卸载后依然执行，this指向，event等都会因为找不到而报错。 原生事件也要清除，声明变量时保存了某个DOM的引用，内存中依然会保留，事件也就不会被清除，导致不会进入垃圾回收机制。可能会造成内存溢出。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，..
react 递归遍历四层树结构 遍历分支中的最后一个节点_干货：深入了解React 渲染原理及性能优化...
weixin_39672979的博客
11-21 621
如今的前端，框架横行，出去面试问到框架是常有的事。我比较常用React， 这里就写了一篇 React 基础原理的内容， 面试基本上也就问这些， 分享给大家。React 是什么React是一个专注于构建用户界面的 Javascript Library.React做了什么？Virtual Dom模型生命周期管理setState机制Diff算法React patch、事件系统React的 V...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案Route不匹配时，组件将被卸载阅读源代码之后Route ，我们发现使用...
react 使用antd（4.x） Modal关闭弹框清空数据问题
fankeweiii的博客
03-30 3110
react 使用antd Modal关闭弹框清空数据问题
React - Native 定时器卸载组件后清除
hahahhahahahha123456的博客
06-27 2802
主要来自官方文档这里主要是解决定时器, 组件在卸载后, 定时器还在运行的问题我们发现很多React Native应用发生致命错误（闪退）是与计时器有关。具体来说，是在某个组件被卸载（unmount）之后，计时器却仍然被激活。为了解决这个问题，我们引入了TimerMixin。如果你在组件中引入TimerMixin，就可以把你原本的setTimeout(fn, 500)改为this.setTimeou...
解决React卸载组件发生的问题(root.unmount())
zyq的博客
05-11 1013
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
react——生命周期
CXLSQ1012的博客
12-06 334
首先就是总结react的生命周期，总结为四大生命周期； 分别为：初始、更新、卸载、错误 下面进行逐个解析： componentDidMount()会在组件挂在后（插入DOM树中）立即调用。 componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。 componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。 sta
react：重置清除数据的方法
热门推荐
1363648943的专栏
08-20 3万+
描述如下： 1､ 页面进来没有数据，只有输入条件的情况下，才能查询数据。 2､查询条件有重置功能。 问题：重置功能如何操作呢？ 数据是从 this.props 中取到的，在重置的时候 1､方法一 ：不调接口 this.props.xxx = [ ] 或者 this.props.xxx =‘‘ ...
react如何卸载组件_React 父组件触发事件后如何卸载并重新加载子组件?
weixin_36243860的博客
01-30 2326
问题描述比较大众的一种情况: 父组件更新render会导致子组件也重新render但是现在有一个比较特殊的要求: 父组件上有一个刷新实时数据的按钮, 我希望当我点击刷新的时候能够卸载掉这个子组件并重新装载。这样就能初始化子组件的state值.问题出现的环境背景及自己尝试过哪些方法具体来说就是, 子组件初次渲染的时候改变了自身state的值, 而state里面有一个数组参数array我用作判断某些事...
react 数据监听
weixin_43294560的博客
06-06 1万+
监听组件传递的值： componentWillReceiveProps(newProps) { 参数为给组件传递的参数 } 监听组件内部状态的变化: componentDidUpdate(prevProps,prevState){ 参数分别为改变之前的数据状态对象 if(prevState.属性名!=this.state.属性名) { ... } } 代码示例: //组件接收新属性时调用 componentWillReceiveProps(newProps)
react组件卸载hook
最新发布
09-09
在 React 中，你可以使用 `useEffect` hook 来处理组件的卸载操作。当组件被卸载时，可以在 `useEffect` 的回调函数中执行清理操作。 下面是一个示例： ```jsx import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 这里是组件挂载时的操作 return () => { // 这里是组件卸载时的操作 }; }, []); return <div>My Component</div>; } ``` 在上面的代码中，我们传递一个空数组作为 `useEffect` 的第二个参数，这样回调函数只会在组件挂载和卸载时执行。 在返回的回调函数中，你可以执行任何清理操作，比如取消订阅、清除定时器、取消网络请求等。这样可以防止内存泄漏和不必要的资源消耗。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值