How to implement React-Native timer Timer

In web development, we usually need to use the timer function, using the setTimeout and setInterval functions. This article mainly introduces the implementation code of the React-Native timer Timer. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

So in ReactNative, is the timer function also provided? The answer is yes.

Let’s take a look at what the official website says first.

The timer is a very important part of an application. React Native implements a timer that is consistent with the browser.

The methods provided are as follows:

• setTimeout, clearTimeout

• setInterval, clearInterval

• setImmediate, clearImmediate

• ##requestAnimationFrame, cancelAnimationFrame

##setTimeout (fn, 1000) and setInterval (fn,1000)

The meaning is the same as in the web. The former means to execute the fn method after a delay of 1000 milliseconds, and the latter means to execute the fn method every 1000 milliseconds.

requestAnimationFrame(fn) is different from setTimeout(fn, 0). The former will be executed once after each frame refresh, while the latter will be executed as quickly as possible (possibly more than 1000 times per second on iPhone5S) .

setImmediate will be executed at the end of the current JavaScript execution block, just before sending batch response data to the native. Note that if you execute setImmediate in the callback function of setImmediate, it will be executed immediately without waiting for the native code before calling.

The implementation of Promise uses setImmediate to perform asynchronous calls.

InteractionManager(Interaction Manager)

An important reason why native applications feel so smooth is to avoid heavy operations during interactions and animations. In React Native, we are currently limited because we only have one JavaScript execution thread. However, you can use the InteractionManager to ensure that all interactions and animations have been handled before doing the heavy lifting.

The application can schedule a task to be executed after the interaction ends by using the following code:

InteractionManager.runAfterInteractions(() => { 
  // ...需要长时间同步执行的任务... 
});

us Let’s compare it with the previous task scheduling methods:

requestAnimationFrame(): used to execute code that controls view animation within a period of time

setImmediate/ setTimeout/setInterval(): Execute code later. Note that this may delay the animation currently in progress.

runAfterInteractions(): Execute the code later without delaying the currently ongoing animation.

The touch processing system will identify one or more ongoing touch operations as 'interaction', and will delay the execution of the callback function of runAfterInteractions() until all touch operations have ended or been cancelled.

InteractionManager also allows applications to register animations, creating an interaction "handle" when the animation starts, and then clearing it when it ends.

var handle = InteractionManager.createInteractionHandle(); 
// 执行动画... (`runAfterInteractions`中的任务现在开始排队等候) 
// 在动画完成之后 
InteractionManager.clearInteractionHandle(handle); 
// 在所有句柄都清除之后，现在开始依序执行队列中的任务

TimerMixin

We found that many fatal errors (crashbacks) in React Native applications are related to timers . Specifically, after a component is unmounted, the timer is still activated. To solve this problem, we introduced TimerMixin. If you introduce TimerMixin into your component, you can change your original setTimeout(fn, 500) to this.setTimeout(fn, 500) (just add this. in front of it), and then when your component is uninstalled, all The timer event will also be cleared correctly.

This library is not released with React Native. You need to enter npm i react-timer-mixin --save in the project folder to install it separately.

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

We strongly recommend that you use this.setTimeout(...) provided by react-timer-mixin instead of setTimeout(...). This can avoid many difficult-to-debug bugs.

Translation Note: Mixin belongs to ES5 syntax. For ES6 code, Mixin cannot be used directly.

If your project is written in ES6 code and uses timers, then you only need to remember to clear (clearTimeout/clearInterval) all used timers when unmounting the component.

Then the same effect as TimerMixin can also be achieved. For example:

import React,{ 
 Component 
} from 'react-native'; 
 
 
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); 
 } 
};

Note:

1. The timer function is relatively simple. When using it in es6, you need to remember to clear (clearTimeout/clearInterval) all used timers when unmounting the component.
2. You can use timers to implement some common functions: such as text message countdowns, etc.
3. You can also use Timers for some special scenarios that require delayed execution. For example: the fetch currently provided by RN does not provide a timeout setting. , if the client requests an interface on the backend and the interface times out (the timeout set by the backend service is 10s), then the RN interface will always be loading and cannot be aborted. Then we can use the timer cleverly at this time. If the time of the Request sent by the client is greater than a certain value (5 seconds), then we will directly consider the request to have failed.
4. Today I also found a scenario where setTimeout is used. When the list page loads the next page, if the interface responds quickly, the loading effect will not appear. At this time, in order to have the loading effect, set a 500 millisecond Delay, haha....

Related recommendations:

jQuery sector timer plug-in pietimer usage method sharing

C#中About the solution to the problem of Timer timer re-entry

php Timer page running time monitoring class

The above is the detailed content of How to implement React-Native timer Timer. For more information, please follow other related articles on the PHP Chinese website!