定时器

定时器对应用来说是最重要的部分之一,React VR实现的是browser timers.

定时器

requestAnimationFrame(fn)setTimeout(fn, 0)不一样,前者在每一帧刷新之后执行一次,后者会

尽可能快的执行(在iphone5s上超过1000次每秒)。

setImmediate则会在当前JS代码块执行结束以后执行,也就是在发送批量响应到原生之前。注意如

果你在setImmediate的回调函数中又执行了setImmediate,它会紧跟着执行,而不会再调用之前等待

原生的代码。

Promise就是用了setImmediate执行异步回调。

TimerMixin

我们发现React VR的最主要的系统性错误就是定时器相关的,也就是在组件卸载之后定时器依旧生

效,为了解决这个问题,我们引入了TimerMixin。如果你在组件中引入TimerMixin,就可以把你原

本的setTimeout(fn, 500)改为this.setTimeout(fn, 500)(只需要在前面加上this.),然后当你的组件

卸载时,所有的计时器事件也会被正确的清除。

这个库并没有跟着React VR一起发布。需要在项目文件夹下输入npm i react-timer-mixin --save

来单独安装它。

import TimerMixin from 'react-timer-mixin';


var Component = React.createClass({

  mixins: [TimerMixin],

  componentDidMount: function() {

    this.setTimeout(

      () => { console.log('I do not leak!'); },

      500

    );

  }

});

用这个库可以规避许多难以排查的BUG

注意:如果你的react组件用ES6,内部没有mixins的API

在ES6里面用TimerMixin,我们推荐用react-mixin