создать таймер с реагировать родной с помощью es6

Я хочу добавить таймер в свое приложение, которое построено с использованием реакции native.

Я просмотрел ссылку в timer mixin в документации, однако я построил остальную часть приложения, используя es6, t быть совместимым.

Я попробовал следующее.

В моем основном классе у меня есть функция с именем getTimerCountDown

getTimerCountDown() {
    setTimeout(() => {
      this.setTimeRemaining(this.getTimeRem()-1);
    }, 1000);
}

getTimeRem() {
    return this.state.timeRemaining;
}

Я пробовал называть это в componentDidUpdate, как показано ниже. Это работает так, как я хочу, если я не буду делать никаких других взаимодействий с пользовательским интерфейсом.

Если я это сделаю (например, у меня есть кнопка, которую я могу щелкнуть по представлению.), так как `componentDidUpdate снова вызван, коня становится очень быстрым (так как его набирают так называемое x количество раз)

componentDidUpdate(){
    this.getTimerCountDown();
}

Я не уверен, полностью ли я нахожусь на неправильном пути или небольшое изменение в том, что я сделал, чтобы получить то, что я хочу. Каков наилучший способ заставить таймер обратного отсчета работать в реакции native с помощью es6?

Таймер на главной странице

<Timer timeRem={this.getTimeRem()} />

возвращает

render(){
    return (
        <View style={styles.container}>
            <Text> This is the Timer : {this.props.setTimer}  - {this.props.timeRem} </Text>
        </View>
    )
}