web-dev-qa-db-ja.com

タイマーReact Native（this.setTimeout）

コンポーネントにTimeOut関数を設定しようとしています。私の理解では、Webの場合のようにsetTimeoutを使用するだけでは適切な答えではありません。タイミングが発生し、メモリのリークが発生します。

反応ネイティブに既存の Timers API があることを読みました。

ただし、ES6に準拠していません。

ReactコンポーネントにES6クラスを使用する場合、mixin用の組み込みAPIはありません。ES6クラスでTimerMixinを使用するには、react-mixinをお勧めします。

そして react-mixin では、このメッセージが見つかります：

注：ミックスインは基本的に死んでいます。これは、レガシーコードの移行パスとしてのみ使用してください。高次コンポーネントを優先します。

私の最後の質問は次のとおりです：2017年にreact-nativeでタイマー（setTimeOut）を適切に使用するにはどうすればよいですか？

javascriptreact-nativetimer
8
Louis Lecocq

SettimeoutおよびsetIntervalは、react-nativeで引き続き機能します。ただし、正しい方法で使用する必要があります。

Reactで私が通常使用しているタイムアウトを実装する多くの方法の1つを次に示します。

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

15
chiquyet