[英]Memory Leak in React Native Android App using setTimeout
I have a React Native Android TV app that I use to display digital signage content on a TV.我有一个 React Native Android 电视应用程序,用于在电视上显示数字标牌内容。 I have received a couple of outOfMemory exceptions after the app has been running for about an hour.
在应用程序运行大约一个小时后,我收到了几个 outOfMemory 异常。 My app initially renders a
Player
component that uses a setTimeout
to run every 1 second.我的应用程序最初呈现一个使用
setTimeout
每 1 秒运行一次的Player
组件。 Each second, the component iterates through a JSON array that has information about different images or videos.每一秒,该组件都会遍历一个 JSON 数组,该数组包含有关不同图像或视频的信息。 Depending on a few conditions, the
Player
component will update a state value currentAsset
and re-render an Asset
component displaying either a video or an image for a specified number of seconds.根据几个条件,
Player
组件将更新currentAsset
值 currentAsset 并重新渲染Asset
组件,显示视频或图像指定的秒数。 To reproduce the outOfMemory exception, I have made the value of currentAsset
toggle back and forth from an auto playing video to an image every 1 second so it literally displays an image on the screen for a second and then a video and repeats this infinitely.为了重现
currentAsset
异常,我使 currentAsset 的值每 1 秒从自动播放视频到图像来回切换,因此它实际上在屏幕上显示图像一秒钟,然后是视频并无限重复。 Although this isn't typical usage it is the fastest way I have been able to recreate the memory exception.虽然这不是典型用法,但它是我能够重新创建 memory 异常的最快方法。
Here is my skeleton code:这是我的骨架代码:
class Player extends Component {
constructor(props) {
super(props)
this.currentAsset = null
this.state = { currentAsset: null }
}
componentDidMount(){
//create cache directory initializes file caching for the player
createCacheDirectory().then(() => {
this.play()
})
}
poll = () => {
//conditional here to either poll an API for updates and call play or just call play
if(canCallAPI){
//this condition happens every 30 seconds
//might call setState in a promise which also saves files locally to the device.
callAPI().then(() => {
//some other setup stuff here
play();
})
}
play()
}
play = () => {
//there is more logic here but the idea is that I get a new object containing a file/video path which I pass to the `Asset` Component
this.currentAsset = this.getCurrentAssetFromJSONArray();
this.setState({ currentAsset: this.currentAsset });
this.timeout = setTimeout(this.poll, 1000);
}
render() {
return (<Asset asset={this.state.currentAsset} />);
}
end
The Asset
component is pretty simple and just checks the value of this.state.currentAsset.file_type
and renders an <Image />
or <Video />
depending on the current file type. Asset
组件非常简单,只检查this.state.currentAsset.file_type
的值并根据当前文件类型呈现<Image />
或<Video />
。
There's a memory leak due to every time the component re-render it create a new timer instance without clearing previous instances.有一个 memory 泄漏,因为每次组件重新渲染它都会创建一个新的计时器实例而不清除以前的实例。
We need to clear out the timer when component unmount.我们需要在组件卸载时清除计时器。
class Player extends Component {
constructor(props) {
super(props);
this.currentAsset = null;
this.state = { currentAsset: null };
this.timeout = null;
}
componentDidMount() {
//create cache directory initializes file caching for the player
createCacheDirectory().then(() => {
this.play();
});
}
poll = () => {
//conditional here to either poll an API for updates and call play or just call play
if (canCallAPI) {
//this condition happens every 30 seconds
//might call setState in a promise which also saves files locally to the device.
callAPI().then(() => {
//some other setup stuff here
play();
});
}
play();
};
play = () => {
//there is more logic here but the idea is that I get a new object containing a file/video path which I pass to the `Asset` Component
this.currentAsset = this.getCurrentAssetFromJSONArray();
this.setState({ currentAsset: this.currentAsset });
this.timeout = setTimeout(this.poll, 1000);
};
componentWillUnmount() {
// Clear current timeout when component unmount
if (this.timeout) {
clearTimeout(this.timer);
}
}
render() {
return <Asset asset={this.state.currentAsset} />;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.