React Native(this.setTimeout)中的计时器

Question

我正在尝试在组件中设置超时功能。据我了解，只需像网络一样使用SettiMeout并不是一个正确的答案。这将导致时间和泄漏记忆问题。

我已经阅读了反应本中现有的计时器API。

但是，它不符合ES6，我引用：

请记住，如果您为您的React组件使用ES6类，则没有用于Mixins的内置API。要将timermixin与ES6类一起使用，我们建议使用React-Mixin。

和react-mixin，我们找到此消息：

注意：混合物基本上死了。仅将其用作传统代码的迁移路径。喜欢高阶组件。

所以我的最后一个问题是：在2017年，我们如何正确使用反应的计时器（settimeout）？

Answer 1

settimeout和setInterval仍然在反应本机中起作用。但是您必须以正确的方式使用它：

这是在我通常使用的React中实现超时的众多方法之一：

export default class Loading extends Component {
  state = {
    timer: null,
    counter: 0
  };
  componentDidMount() {
    let timer = setInterval(this.tick, 1000);
    this.setState({timer});
  }
  componentWillUnmount() {
    clearInterval(this.state.timer);
  }
  tick =() => {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  render() {
    return <div>Loading{"...".substr(0, this.state.counter % 3 + 1)}</div>
  }
}

使用这种方法，您不必担心内存泄漏了。只是简单而直接。

有一篇很棒的文章谈论这一点。您可以在此处参考：https：//medium.com/@machadogj/timers-incct-with-with-redux-apps-9a5a722162e8

Answer 2

为了添加功能组件和钩子的外观。

import React, { useEffect } from 'react'
import { Text } from 'react-native'
const Component = props => {
    useEffect(() => {
        let timer = setInterval(() => console.log('fire!'), 1000);
        return () => clearInterval(timer)
    }, [])
    return <Text>Example of using setInterval with hooks</Text>
}

Answer 3

从@chiquyet拿起 cordrence 谢谢@chiquyet

https://stackoverflow.com/a/47549754/11754047

this.clearInterval(this.state.timer);

将在中丢弃错误

描述

用5个隔板的本机中的简单计时器以及验证 and 警报

我尝试，（）=>" react"：" 16.9.0"，"反应本"：" 0.61.5"，

小吃expo link（）=> https://snack.expo.io/puyxrmuew

import React from 'react'
import { View, Text, Button, SafeAreaView, TextInput } from 'react-native'
export default class Timer extends React.Component {
    state = {
        timer: null,
        counter: 5,
    };
    startTimer = () => {
        let timer = setInterval(this.manageTimer, 1000);
        this.setState({ timer });
    }
    manageTimer = () => {
        var states = this.state
        if (states.counter === 0) {
            alert('Times Up !nTimer  is reset')
            clearInterval(this.state.timer)
            this.setState({
                counter: 5
            })
        }
        else {
            this.setState({
                counter: this.state.counter - 1
            });
        }
    }
    componentWillUnmount() {
        clearInterval(this.state.timer);
    }

    render() {
        return (
            <SafeAreaView>

                <Text style={{ textAlign: 'center' }}>{this.state.counter}</Text>
                <View>
                    <Button
                        title='START TIMER'
                        onPress={() => this.startTimer()}
                    />
                </View>
            </SafeAreaView>
        )
    }
}

希望这对您有帮助：）

Answer 4

计时器不是'react-native'软件包的一部分

• cd/path_to_your_project
• 安装React-Timer-Mixin软件包
• 在.js文件中添加计时器

• 设置计时器

  npm i react-timer-mixin --save (from console)
  import TimerMixin from 'react-timer-mixin';
  this.interval = setInterval(() => {
      //DO SOMETHING
  }, 5);