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

Question

我正在尝试在我的组件中设置TimeOut函数.据我所知,只是像使用网络一样使用setTimeout不是一个正确的答案.这会导致计时和泄漏内存问题.

我已经读过现有的Timers API in react-native.

但是,它不符合ES6,我引述:

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

在react-mixin上,我们发现以下消息:

注意:mixins基本上死了.仅将其用作旧代码的迁移路径.喜欢高阶组件.

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

Answer 1

实际上setTimeout和setInterval仍然在react-native中工作.但你必须以正确的方式使用它:

以下是我通常使用的反应中实现超时的许多方法之一:

export default class Loading extends Component {
  state = {
    timer: null,
    counter: 0
  };

  componentDidMount() {
    let timer = setInterval(this.tick, 1000);
    this.setState({timer});
  }

  componentWillUnmount() {
    this.clearInterval(this.state.timer);
  }

  tick =() => {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    <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>
}