집 > 기사 > 웹 프론트엔드 > React-Native 타이머 구현 방법 타이머

React-Native 타이머 구현 방법 타이머

小云云원래의: 2018-01-27 16:54:192855검색

웹 개발에서는 일반적으로 setTimeout 및 setInterval 함수를 사용하여 타이머 함수를 사용해야 합니다. 이번 글에서는 주로 React-Native에서 Timer의 구현 코드를 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

그럼 ReactNative도 타이머 기능을 제공하나요? 대답은 '예'입니다.

먼저 공식 홈페이지에 나와 있는 내용을 살펴보겠습니다.

타이머는 애플리케이션에서 매우 중요한 부분입니다. React Native는 브라우저와 일치하는 타이머를 구현합니다.

제공되는 메소드는 다음과 같습니다:

setTimeout,clearTimeout
setInterval,clearInterval
setImmediate,clearImmediate
requestAnimationFrame, cancelAnimationFrame

setTimeout(fn, 1000) 및 setInterval (fn ,1000)

은 웹에서의 의미와 동일합니다. 전자는 1000밀리초의 지연 후에 fn 메서드를 실행한다는 의미이고, 후자는 1000밀리초마다 fn 메서드를 실행한다는 의미입니다.

requestAnimationFrame(fn)은 setTimeout(fn, 0)과 다릅니다. 전자는 각 프레임 새로 고침 후에 한 번 실행되는 반면 후자는 최대한 빠르게 실행됩니다(iPhone5S에서는 초당 1000회 이상 가능).

setImmediate는 일괄 응답 데이터를 네이티브로 보내기 직전에 현재 JavaScript 실행 블록의 끝에서 실행됩니다. 참고로 setImmediate의 콜백 함수에서 setImmediate를 실행하면 호출 전 네이티브 코드를 기다리지 않고 바로 실행된다는 점에 유의하세요.

Promise 구현에서는 setImmediate를 사용하여 비동기 호출을 수행합니다.

InteractionManager(Interaction Manager)

네이티브 애플리케이션이 그렇게 매끄럽게 느껴지는 중요한 이유는 상호작용과 애니메이션 중에 과도한 작업을 피하는 것입니다. React Native에서는 JavaScript 실행 스레드가 하나만 있기 때문에 현재 제한적입니다. 그러나 InteractionManager를 사용하면 무거운 작업을 수행하기 전에 모든 상호 작용과 애니메이션이 처리되었는지 확인할 수 있습니다.

응용 프로그램은 다음 코드를 통해 상호 작용이 끝난 후 실행될 작업을 예약할 수 있습니다.

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

이를 이전의 여러 작업 예약 방법과 비교해 보겠습니다.

requestAnimationFrame(): 코드를 실행하는 데 사용됩니다. 일정 기간 동안 뷰 애니메이션을 제어하는

setImmediate/setTimeout/setInterval(): 나중에 코드를 실행하세요. 이로 인해 현재 진행 중인 애니메이션이 지연될 수 있습니다.

runAfterInteractions(): 현재 진행 중인 애니메이션을 지연시키지 않고 나중에 코드를 실행합니다.
터치 처리 시스템은 하나 이상의 진행 중인 터치 작업을 '상호작용'으로 식별하고 모든 터치 작업이 종료되거나 취소될 때까지 runAfterInteractions()의 콜백 함수 실행을 지연합니다.

InteractionManager를 사용하면 앱이 애니메이션을 등록하여 애니메이션이 시작될 때 상호 작용 "핸들"을 생성하고 끝날 때 이를 지울 수도 있습니다.

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

TimerMixin

우리는 React Native 애플리케이션에서 많은 치명적인 오류(충돌)가 타이머와 관련되어 있음을 발견했습니다. 특히 구성요소가 마운트 해제된 후에도 타이머는 계속 활성화됩니다. 이 문제를 해결하기 위해 TimerMixin을 도입했습니다. TimerMixin을 컴포넌트에 도입하면 원래 setTimeout(fn, 500)을 this.setTimeout(fn, 500)으로 변경할 수 있습니다(이것을 앞에 추가하면 됩니다). 그런 다음 컴포넌트가 언로드되면 모든 타이머 이벤트도 올바르게 지워집니다.

이 라이브러리는 React Native와 함께 출시되지 않습니다. 별도로 설치하려면 프로젝트 폴더에 npm i React-timer-mixin --save 를 입력해야 합니다.

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

setTimeout(...) 대신 React-timer-mixin에서 제공하는 this.setTimeout(...)을 사용하는 것이 좋습니다. 이렇게 하면 디버깅하기 어려운 많은 버그를 피할 수 있습니다.

주석: Mixin은 ES5 구문에 속하며 ES6 코드의 경우 Mixin을 직접 사용할 수 없습니다.

프로젝트가 ES6 코드로 작성되고 타이머를 사용하는 경우 구성 요소를 마운트 해제할 때 사용된 모든 타이머를 지우는 것(clearTimeout/clearInterval)만 기억하면 됩니다.

그러면 TimerMixin과 동일한 효과를 얻을 수도 있습니다. 예:

import React,{ 
 Component 
} from &#39;react-native&#39;; 
 
 
export default class Hello extends Component { 
 componentDidMount() { 
  this.timer = setTimeout( 
   () => { console.log(&#39;把一个定时器的引用挂在this上&#39;); }, 
   500 
  ); 
 } 
 componentWillUnmount() { 
  // 如果存在this.timer，则使用clearTimeout清空。 
  // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear 
  this.timer && clearTimeout(this.timer); 
 } 
};

참고:

1. 타이머 기능은 es6에서 사용하는 경우 구성 요소를 마운트 해제할 때 사용된 모든 타이머를 삭제(clearTimeout/clearInterval)해야 한다는 점을 기억해야 합니다.
2. 타이머를 사용하여 문자 메시지 카운트다운 등 몇 가지 일반적인 기능을 구현할 수 있습니다.
3. 지연된 실행이 필요한 일부 특수 시나리오에도 타이머를 사용할 수 있습니다. 예를 들어 현재 RN에서 제공하는 가져오기는 제공되지 않습니다. 클라이언트가 백엔드에서 인터페이스를 요청할 때 인터페이스 시간이 초과되면(백엔드 서비스에서 설정한 시간 초과는 10초임) RN 인터페이스는 계속 로드되고 중단될 수 없습니다. 그러면 이때 클라이언트가 보낸 요청 시간이 특정 값(5초)보다 크면 요청이 실패한 것으로 직접 간주합니다.
4. 오늘은 목록 페이지가 다음 페이지를 로드할 때 인터페이스가 빠르게 응답하면 로딩 효과가 나타나지 않는 시나리오도 발견했습니다. 500밀리초 지연. ㅋㅋㅋ...

React-Native 타이머 구현 방법 타이머

관련 기사