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

Question

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

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

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

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

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

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

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

原文由 Louis Lecocq 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 chiquyet 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>
}

原文由 SKeney 发布，翻译遵循 CC BY-SA 4.0 许可协议