React - Native 定时器卸载组件后清除

最新推荐文章于 2025-04-20 19:45:06 发布

I-T枭

最新推荐文章于 2025-04-20 19:45:06 发布

阅读量2.9k

点赞数 1

分类专栏： React Native 文章标签：清除定时器

本文链接：https://blog.youkuaiyun.com/hahahhahahahha123456/article/details/80826916

版权

React Native 专栏收录该内容

65 篇文章

订阅专栏

本文介绍如何使用TimerMixin或在ES6中手动管理计时器，以避免ReactNative应用因组件卸载后计时器仍在运行而导致的内存泄漏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要来自官方文档

这里主要是解决定时器, 组件在卸载后, 定时器还在运行的问题

我们发现很多React Native应用发生致命错误（闪退）是与计时器有关。具体来说，是在某个组件被卸载（unmount）之后，计时器却仍然被激活。为了解决这个问题，我们引入了TimerMixin。如果你在组件中引入TimerMixin，就可以把你原本的setTimeout(fn, 500)改为this.setTimeout(fn, 500)(只需要在前面加上this.)，然后当你的组件卸载时，所有的计时器事件也会被正确的清除。
这个库并没有跟着React Native一起发布。你需要在项目文件夹下输入npm i react-timer-mixin --save来单独安装它。

var TimerMixin = require('react-timer-mixin');

var Component = React.createClass({
  mixins: [TimerMixin],
  componentDidMount: function() {
    this.setTimeout(
      () => { console.log('这样我就不会导致内存泄露!'); },
      500
    );
  }
});

我们强烈建议您使用react-timer-mixin提供的this.setTimeout(...)来代替setTimeout(...)。这可以规避许多难以排查的BUG。

译注：Mixin属于ES5语法，对于ES6代码来说，无法直接使用Mixin。如果你的项目是用ES6代码编写，同时又使用了计时器，那么你只需铭记在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器，那么也可以实现和TimerMixin同样的效果。例如：

import React,{
  Component
} from 'react';

export default class Hello extends Component {
  componentDidMount() {
    this.timer = setTimeout(
      () => { console.log('把一个定时器的引用挂在this上'); },
      500
    );
  }
  componentWillUnmount() {
    // 如果存在this.timer，则使用clearTimeout清空。
    // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
    this.timer && clearTimeout(this.timer);
  }
};