mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 20:44:10 +00:00
f42f2dff37
Summary: Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial). I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native. Closes https://github.com/facebook/react-native/pull/14371 Differential Revision: D5201127 Pulled By: hramos fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002
81 lines
3.7 KiB
Markdown
81 lines
3.7 KiB
Markdown
---
|
|
id: timers
|
|
title: Timers
|
|
layout: docs
|
|
category: Guides
|
|
permalink: docs/timers.html
|
|
next: debugging
|
|
previous: accessibility
|
|
---
|
|
|
|
Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers).
|
|
|
|
## Timers
|
|
|
|
- setTimeout, clearTimeout
|
|
- setInterval, clearInterval
|
|
- setImmediate, clearImmediate
|
|
- requestAnimationFrame, cancelAnimationFrame
|
|
|
|
`requestAnimationFrame(fn)` is not the same as `setTimeout(fn, 0)` - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).
|
|
|
|
`setImmediate` is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call `setImmediate` within a `setImmediate` callback, it will be executed right away, it won't yield back to native in between.
|
|
|
|
The `Promise` implementation uses `setImmediate` as its asynchronicity primitive.
|
|
|
|
|
|
## InteractionManager
|
|
|
|
One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use `InteractionManager` to make sure long-running work is scheduled to start after any interactions/animations have completed.
|
|
|
|
Applications can schedule tasks to run after interactions with the following:
|
|
|
|
```javascript
|
|
InteractionManager.runAfterInteractions(() => {
|
|
// ...long-running synchronous task...
|
|
});
|
|
```
|
|
|
|
Compare this to other scheduling alternatives:
|
|
|
|
- requestAnimationFrame(): for code that animates a view over time.
|
|
- setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.
|
|
- runAfterInteractions(): run code later, without delaying active animations.
|
|
|
|
The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled.
|
|
|
|
InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
|
|
|
|
```javascript
|
|
var handle = InteractionManager.createInteractionHandle();
|
|
// run animation... (`runAfterInteractions` tasks are queued)
|
|
// later, on animation completion:
|
|
InteractionManager.clearInteractionHandle(handle);
|
|
// queued tasks run if all handles were cleared
|
|
```
|
|
|
|
|
|
## TimerMixin
|
|
|
|
We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced `TimerMixin`. If you include `TimerMixin`, then you can replace your calls to `setTimeout(fn, 500)` with `this.setTimeout(fn, 500)` (just prepend `this.`) and everything will be properly cleaned up for you when the component unmounts.
|
|
|
|
This library does not ship with React Native - in order to use it on your project, you will need to install it with `npm i react-timer-mixin --save` from your project directory.
|
|
|
|
```javascript
|
|
import TimerMixin from 'react-timer-mixin';
|
|
|
|
var Component = React.createClass({
|
|
mixins: [TimerMixin],
|
|
componentDidMount: function() {
|
|
this.setTimeout(
|
|
() => { console.log('I do not leak!'); },
|
|
500
|
|
);
|
|
}
|
|
});
|
|
```
|
|
|
|
This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.
|
|
|
|
Keep in mind that if you use ES6 classes for your React components [there is no built-in API for mixins](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins). To use `TimerMixin` with ES6 classes, we recommend [react-mixin](https://github.com/brigand/react-mixin).
|