React-native 中因为计时器导致的异常解决办法

很多React Native应用发生致命错误（闪退）是与计时器有关。在某个组件被卸载（unmount）之后，计时器却仍然被激活。为了解决这个问题，需要在组件中引入TimerMixin，就可以把你原本的setTimeout(fn, 500)改为this.setTimeout(fn, 500)(只需要在前面加上this.)，然后当你的组件卸载时，所有的计时器事件也会被正确的清除。

这个库并没有跟着React Native一起发布。你需要在项目文件夹下输入npm i react-timer-mixin --save来单独安装它。

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); } };