타이머는 애플리케이션의 중요한 부분이며, React Native 는 브라우저 타이머를 구현합니다.
- setTimeout, clearTimeout
- setInterval, clearInterval
- setImmediate, clearImmediate
- requestAnimationFrame, cancelAnimationFrame
requestAnimationFrame(fn) 은 setTimeout(fn, 0) 과 동일하지 않습니다. 전자는 프레임이 모두 플러시된 후에 발생하지만, 후자는 가능한 한 빨리 발생합니다. (iPhone 5S 에서는 초당 1000x 이상)
setImmediate 는 일괄 처리된 응답을 네이티브로 다시 보내기 직전, 현재 JavaScript 실행 블록의 끝에서 코드를 실행합니다. setImmediate 콜백 내에서 setImmediate 를 호출하면 즉시 실행되며, 그 사이 네이티브로 다시 전송되지 않습니다.
Promise 구현은 비동기 구현으로, setImmediate 를 사용합니다.
참고: Android에서 디버깅할 때, 디버거와 디바이스 사이의 시간이 경과한 경우, 애니메이션, 이벤트 동작 등의 작업이 제대로 작동하지 않거나 결과가 정확하지 않을 수 있습니다. 디버거에서 adb shell "date
date +%m%d%H%M%Y.%S%3N"를 실행해 이 문제를 해결하세요. 실제 디바이스에 접근하려면 루트 권한이 필요합니다.
잘 구축된 네이티브 앱이 매끄럽게 느껴지는 한 가지 이유는, 상호작용 및 애니메이션 중에 값비싼 작업을 피할 수 있기 때문입니다. React Native에서는 현재 JS 실행 스레드가 싱글 스레드라는 제한이 있지만, Interaction Manager 를 사용하여 상호작용/애니메이션이 완료된 후 장시간 실행되는 작업이 시작되도록 예약할 수 있습니다.
애플리케이션은 아래와 같이 상호 작용 후 작업을 스케쥴링할 수 있습니다.
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});이 방법을 다른 스케쥴링 방법과 비교해보세요.
- requestAnimationFrame(): 시간 경과에 따라 뷰를 애니메이션화하는 코드에 사용됩니다.
- setImmediate/setTimeout/setInterval(): 코드를 나중에 실행하면, 애니메이션이 지연될 수 있습니다.
- runAfterInteractions(): 활성화 된 애니메이션을 지연시키지 않고 나중에 코드를 실행합니다.
터치 핸들링 시스템은 하나 이상의 활성 터치를 '상호작용'으로 간주하고 모든 터치가 종료되거나 취소될 때까지 runAfterInteractions() 콜백을 지연시킵니다.
또한 InteractionManager는 애니메이션 시작 시 인터랙션 'handle' 을 생성하고, 완료 시 삭제함으로써 애플리케이션이 애니메이션을 등록할 수 있도록 합니다.
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