[技术博客]React-Native中的组件加载、卸载与setState问题
React-Native中的组件加载、卸载与setState问题。
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
通常我们会在componentWillMount方法中执行异步数据请求,然后调用setState方法处理得到的数据来更新界面。有时会遇到这个警告,如下图:
警告提示我们可能在被卸载的组件上调用了setState()方法。一般情况下是在某个异步请求还未结束时组件被卸载了,但请求完毕后按照仍会按照正常流程调用setState()方法,这时就出现了上面的警告。
下面用一段代码来复现这种情况。为了方便,不使用真正的网络请求,而是使用下面的count()方法。count()方法每隔1秒调用一次setState方法将this.state.count加1,总共调用10次setState()方法。这样就有充足的时间来观察和操作。
在render()方法中,将this.state.count这个数字显示在屏幕中央。componentWillMount方法中调用count方法,组件准备加载时就开始计数,相当于进行异步的网络请求。在跳转到这个页面后,屏幕中央的数字会从0一直加到10,在加到10之前,退出这个页面,就能观察到上图所示的警告。
import React, { Component} from 'react';
import {
View,
Text,
} from 'react-native';
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
}
}
x = 0;
count = () => {
if (this.x < 10) {
this.x++;
this.setState({count: this.x});
setTimeout(this.count, 1000);
}
}
componentWillMount() {
this.count();
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 40}}>{this.state.count}</Text>
</View>
)
}
}
实际上,这个警告能帮助我们找到程序中的bug,在一个被卸载的组件上调用setState()意味着这个组件可能没有被正确的清理掉,也就是说,程序仍然具有对这个被卸载组件的引用,这可能导致内存泄漏。
以前有一个isMounted()函数用来确定组件的状态,避免在被卸载了的组件上调用setState()方法,但是现在已经不再使用了。
要解决这个问题,可以维护一个变量_isMounted,来跟踪组件的状态。在componentDidMount()中将其设置为true,在componentWillUnmount()中将其设置为false。然后在使用setState, replaceState, or forceUpdate方法时检查组件被卸载之后是否可能被调用,如果是,则使用_isMounted变量。
修正后的代码如下。现在再重复前面的操作,在数字数到10之前退出页面,就不会出现警告了。
import React, { Component} from 'react';
import {
View,
Text,
} from 'react-native';
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
}
}
x = 0;
count = () => {
if (this.x < 10) {
this.x++;
if (this._isMounted) {
this.setState({count: this.x});
}
setTimeout(this.count, 1000);
}
}
_isMounted;
componentWillMount() {
this.count();
}
componentWillUnmount() {
this._isMounted = false;
}
componentDidMount() {
this._isMounted = true;
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 40}}>{this.state.count}</Text>
</View>
)
}
}
无isMounted:
有isMounted:
参考连接:
【React报错】isMounted is an Antipattern
原文地址:https://www.cnblogs.com/PureMan6/p/10871932.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【C++ STL】停下你到处找 hash_map 使用教程的手,看我的就好了
- 【C++】同样是讲解逆波兰式,为何这篇就图文并茂,通俗易懂呢?
- 学以致用C++设计模式 “建造者模式”
- 你会不会处理多线程中的对象管理?
- 操作系统入门(二)进程
- Prometheus监控神器-服务发现篇(一)
- 给女同事讲解MySQL数据库设计范式与反范式,她夸我“技术好”
- 重拾Java Web应用的基础体系结构
- Qt音视频开发18-海康sdk回调
- Linux 内核编码风格
- c语言指针学习
- c语言函数指针的理解与使用
- Python爬虫基础
- Python算法基础
- pytorch读取一张图像进行分类预测需要注意的问题(opencv、PIL)