React-Native timer implementation code

In web development, we usually need to use the timer function, using the setTimeout and setInterval functions.

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

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

Timers are 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)

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) and setTimeout(fn, 0) are different. The former will be executed once after each frame refresh, while the latter will be executed as quickly as possible (it may be more than 1,000 times per second on iPhone 5S).

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

The implementation of Promise uses setImmediate to execute asynchronous calls.

InteractionManager (Interaction Manager)

One of the important reasons why native applications feel so smooth is to avoid heavy operations during interaction and animation. In React Native, we are currently restricted because we only have one JavaScript execution thread. However, you can use InteractionManager to ensure that all interactions and animations are processed before performing heavy work.

An application can arrange a task through the following code to execute after the interaction is over:

(() =&gt; { 
  // ...Tasks that require long-term synchronization...});

Let's compare it with the previous task arrangement methods:

requestAnimationFrame(): code used to execute control view animations over a period of time

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

runAfterInteractions(): Execute the code later, and the current animation will not be delayed.
The touch processing system will determine one or more in-progress touch operations as 'interactive' and will delay the execution of the runAfterInteractions() callback function until all touch operations are ended or cancelled.

InteractionManager also allows the application to register an animation, create an interactive "handle" at the beginning of the animation, and then clear it at the end.

var handle = (); 
// Execute the animation... (The tasks in `runAfterInteractions` now start waiting in line)// After the animation is completed(handle); 
// After all handles are cleared，Now start executing tasks in the queue in sequence

TimerMixin

We have found that many React Native applications have fatal errors (flashbacks) 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 the component, you can change your original setTimeout(fn, 500) to (fn, 500) (just add this.) and then when your component is uninstalled, all timer events will be properly cleared.

This library was 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 = ({ 
 mixins: [TimerMixin], 
 componentDidMount: function() { 
  ( 
   () =&gt; { ('That way I won't cause memory leaks!'); }, 
   500 
  ); 
 } 
});

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

Translator's note: Mixin belongs to ES5 syntax, and for ES6 code, it is impossible to use Mixin directly.

If your project is written in ES6 code and uses timers, you just need to remember to clearTimeout/clearInterval when unmount the component.

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

import React,{ 
 Component 
} from 'react-native'; 
 
 
export default class Hello extends Component { 
 componentDidMount() { 
   = setTimeout( 
   () =&gt; { ('Hang a reference to a timer on this'); }, 
   500 
  ); 
 } 
 componentWillUnmount() { 
  // If it exists, use clearTimeout to clear.  // If you use multiple timers, then use multiple variables, or use arrays to save the references, and then clear one by one   &amp;&amp; clearTimeout(); 
 } 
};

Note:

1. The timer function is relatively simple. Note that when using it in es6, you need to remember to clearTimeout/clearInterval all timers used when unmount the component.
2. You can use a timer to implement some ordinary functions: such as SMS countdown, etc.
3. Timer can also be used for some special scenarios that require delayed execution. For example, the current fetch provided by RN does not provide a timeout time. If the client requests an interface on the backend and the interface timed out (the timeout time set by the backend service is 10s), then the RN interface will be loaded and cannot be aborted. Then at this time we can cleverly use the timer. If the request issued by the client is greater than a certain value (5 seconds), then we directly think that the request has failed.
4. Today I also found a scene using setTimeout. When the next page is loaded on the list page, if the interface responds very quickly, the loading effect will not occur. At this time, in order to have the loading effect, a 500 millisecond delay is set, haha...

refer to:/docs/0.31/#content

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.