web-dev-qa-db-ja.com

矢印関数のないsetInterval関数

ドキュメントに従ってreactコンポーネントについて学習しています https://facebook.github.io/react/docs/state-and-lifecycle.html

ここで矢印関数を使用する必要があるのはなぜですか。

this.timerID = setInterval(() => this.tick(), 1000);

なぜ私はただ言うことができないのですか（明らかにそれは機能しません）

this.timerID = setInterval(this.tick(), 1000);
javascriptreactjssetintervalarrow-functions
10
gvaswani

setIntervalの最初の引数はfunction型です。あなたがこれを書くならば：

this.timerID = setInterval(this.tick(), 1000);

…その後、関数を渡さず、代わりに関数this.tickをすぐに実行し、その関数呼び出しによって返された値を引数として渡します。

あなたできた次のように書いてください：

this.timerID = setInterval(this.tick, 1000);

括弧を省略すると、this.tick関数への参照が渡され、1000ミリ秒後にsetIntervalによって実行されます。

9
Patrick Hund

setIntervalは最初の引数として関数を取り、2番目のケースでは戻り値を取得しています

に変更します

this.timerID = setInterval(this.tick.bind(this), 1000);

または

 this.timerID = setInterval(() => this.tick(), 1000);

これはおそらく、関数をReactコンテキストにバインドするときに必要なものです。

Reactで関数をバインドする必要がある理由でこの回答を参照してください

そうでなければ、あなたは単に書くことができただろう

this.timerID = setInterval(this.tick, 1000);
7
Shubham Khatri

関数参照を指定する必要があります。関数を呼び出そうとしています。その関数が関数参照を返さない限り、コードは機能しません。

そのように見えるはずです

this.tick = function() { .... }

this.timerID = setInterval(this.tick, 1000);
0
svarog

矢印関数を使用していない場合、コードは次のようになります。

this.timerID = setInterval(function(){ this.tick() }, 1000);
0
dealwap