当前位置:网站首页>componentWillUnmount卸载组件
componentWillUnmount卸载组件
2022-04-23 00:08:00 【Buliang_C】
问题:index.js:1 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 the componentWillUnmount method.
(警告:无法在已卸载的组件上执行React状态更新。这是空操作,但是它表明您的应用程序中发生内存泄漏。要解决此问题,请在componentWillUnmount方法中取消所有订阅和异步任务。)

问题描述:这个是在组件卸载之后,再进行React的state的状态更新,这显然对React的组件来说是一个空操作,已经没有任何组件可以用来更新状态并进行渲染,于是会报上述错误。
与这个问题类似的是,在React的有状态组件加载之前,提前进行组件状态的变化setState,这会导致无法判断后面是否有页面的渲染。在组件加载之前进行数据变更,不过现在componentWillMount()这个生命周期函数已经被移除了。
举一个React的小例子,予以说明:
class Clock extends React.Component {
constructor() {
super()
this.state = {
now: 0
}
}
// 在组件卸载之前进行定时器的清除,不然在组件卸载之后还会更新state,导致内存泄漏
componentWillUnmount() {
clearInterval(this.timeId)
}
componentDidMount() {
// var that = this
var func = function() {
var now = new Date().toLocaleTimeString()
this.setState({
now
})
}.bind(this)
func()
//每间隔1s执行一次func()方法
this.timeId = setInterval(func, 1000)
}
render() {
return (
<div className="container">
{
this.state.now}
</div>
)
}
}
在页面实时显示当前的时间,componentDidMount()中的定时器,每一秒钟改变一次state状态,组件感知状态发生变化,便进行组件的重新渲染。在组件卸载的当前时刻,执行componentWillMount()中的内容,清空定时器timeId。告知React组件已经快要被卸载,卸载之后不要再执行状态的更新。
React官网的componentWillUnmount
版权声明
本文为[Buliang_C]所创,转载请带上原文链接,感谢
https://blog.csdn.net/o__o__o__o/article/details/116791653
边栏推荐
- What are the target keywords?
- 条码WMS系统与ERP接口实现方法
- Daily CISSP certification common mistakes (April 22, 2022)
- Is the securities account of goucai school reliable? Is it safe to open an account now? Which securities firm is better?
- OJ's daily practice -- falling and bouncing ball
- SystemVerilog verification - Test Platform preparation guide learning notes (5): function coverage
- Target detection model regression anchor offset and other problems
- WMS系统与ERP仓储管理的差异
- L1-072 scratch lottery (20 points)
- Robot OS System Architecture Design
猜你喜欢

【ACM】51. Queen n

条码WMS系统的架构

Summarize the methods of AI data enhancement

Understanding of swin transformer network architecture and corresponding improvement modules

Force deduction exercise set 2 -- addition of two numbers

SystemVerilog verification - Test Platform preparation guide learning notes (0): introduction to verification

Automatic watering system based on 51 single chip microcomputer

归纳AI数据增强的方法

SystemVerilog verification - Test Platform writing guide learning notes (3): connecting design and test platform

【ACM】47. 全排列 II(考虑某一树枝下,已经记录的元素在下一层递归时是否会被重复记录(使用数组used来记录))
随机推荐
WMS仓储管理系统解决方案
条件判断(whilec循环&for&switch循环&if-else判断)
In the b-end / C-end, which is more important, product or operation?
SystemVerilog verification - Test Platform writing guide learning notes (3): connecting design and test platform
Teach you two minutes to make a beautiful and easy-to-use 404 page
Solve the error reporting problem of require is not defined
WMS系统与ERP仓储管理的差异
【ACM】47. 全排列 II(考虑某一树枝下,已经记录的元素在下一层递归时是否会被重复记录(使用数组used来记录))
Is the securities account of goucai school reliable? Is it safe to open an account now? Which securities firm is better?
SAP integrated WMS system solution process for large enterprises
Robot OS System Architecture Design
根据高度计算文字大小
Shell脚本笔记(5)- 本的条件语句
The latest MySQL tutorial is easy to understand
A ConvNet for the 2020s的总结
Daily CISSP certification common mistakes (April 22, 2022)
【必备知识】线激光扫描三维成像原理
SystemVerilog verification - Test Platform preparation guide learning notes (1): data types
Rotate according to angle
3D旋转动画