在网络开发中,我们通常需要使用定时器功能,使用setTimeout和setInterval函数。
那么在ReactNative中,是否也提供了定时器的功能呢?答案是肯定的。
我们还是先看看官网怎么说的。
定时器是一个应用中非常重要的部分.React本地实现了和浏览器一致的定时器计时器。
提供的方法如下:
-
<李> setTimeout, clearTimeout李
<李> setInterval, clearInterval李
<李> setImmediate, clearImmediate李
<李> requestAnimationFrame, cancelAnimationFrame李
<强> setTimeout (fn, 1000),和setInterval (fn, 1000)
和网络中的意思一样,前者表示延迟1000毫秒后执行fn方法,后者表示每隔1000毫秒执行fn方法。
requestAnimationFrame (fn)和setTimeout (fn, 0)不同,前者会在每帧刷新之后执行一次,而后者则会尽可能快的执行(在iphone5上有可能每1000秒次以上)。
setImmediate则会在当前JavaScript执行块结束的时候执行,就在将要发送批量响应数据到原生之前。注意如果你在setImmediate的回调函数中又执行了setImmediate,它会紧接着立刻执行,而不会在调用之前等待原生代码。
承诺的实现就使用了setImmediate来执行异步调用。
<强> InteractionManager(交互管理器)
原生应用感觉如此流畅的一个重要原因就是在互动和动画的过程中避免繁重的操作。在本机里反应,我们目前受到限制,因为我们只有一个JavaScript执行线程。不过你可以用InteractionManager来确保在执行繁重工作之前所有的交互和动画都已经处理完毕。
应用可以通过以下代码来安排一个任务,使其在交互结束之后执行:
我们来把它和之前的几个任务安排方法对比一下:
requestAnimationFrame():用来执行在一段时间内控制视图动画的代码
setImmediate/setTimeout和setInterval():在稍后执行代码。注意这有可能会延迟当前正在进行的动画。
runAfterInteractions():在稍后执行代码,不会延迟当前进行的动画。
触摸处理系统会把一个或多个进行中的触摸操作认定为“交互”,并且会将runAfterInteractions()的回调函数延迟执行,直到所有的触摸操作都结束或取消了。
InteractionManager还允许应用注册动画,在动画开始时创建一个交互“句柄”,然后在结束的时候清除它。
<强> TimerMixin
我们发现很多反应本机应用发生致命错误(闪退)是与计时器有关。具体来说,是在某个组件被卸载(卸载)之后,计时器却仍然被激活。为了解决这个问题,我们引入了TimerMixin。如果你在组件中引入TimerMixin,就可以把你原本的setTimeout (fn, 500)改为这个。setTimeout (fn, 500)(只需要在前面加上。),然后当你的组件卸载时,所有的计时器事件也会被正确的清除。
这个库并没有跟着反应本地一起发布。你需要在项目文件夹下输入npm我react-timer-mixin——拯救来单独安装它。
我们强烈建议您使用react-timer-mixin提供的this.setTimeout(…)来代替setTimeout(…)。这可以规避许多难以排查的错误。
译注:Mixin属于ES5语法,对于ES6代码来说,无法直接使用Mixin。
如果你的项目是用ES6代码编写,同时又使用了计时器,那么你只需铭记在卸载组件时清除(clearTimeout/clearInterval)所有用到的定时器。
那么也可以实现和TimerMixin同样的效果,例如:
