React Native 中的定时器（this.setTimeout）

Question

我正在尝试在我的组件中设置一个 TimeOut 函数。 据我了解，像在网络上一样使用 setTimeout 并不是一个正确的答案。 它会导致计时和泄漏内存问题。

我读过在 react-native 中有一个现有的Timers API 。

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

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

在react-mixin 上，我们发现了这条消息：

注意：mixin 基本上已经死了。 仅将此用作遗留代码的迁移路径。 首选高阶组件。

所以我的最后一个问题是：我们如何在 2017 年正确使用带有 react-native 的计时器 (setTimeOut)？

Answer 1

Settimeout 和 setInterval 仍然适用于 react-native。 但是你必须以正确的方式使用它：

这是我通常使用的在 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-in-react-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，谢谢@chiquyet

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

this.clearInterval(this.state.timer);

会在本机反应中引发错误

描述

简单的计时器以 5 秒响应本机，以及验证和警报

我尝试， () => "react": "16.9.0", "react-native": "0.61.5",

小吃展链接 () => https://snack.expo.io/PuYxRmue​​W

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);