ES6のarrow関数をこの場面で、利用する理由をご教授ください。

Question

いつもお世話になっております。
今回はES6について質問をよろしいでしょうか。
※Reactの公式ドキュメント内にあるプログラムを参照していますが、ES6に関する質問内容です。

Reactの公式ドキュメントを見ていると、以下のようなプログラムが見つかりますが、

ClockクラスのcomponentDidMountメソッドで
setIntevalの第一引数をアロー関数にする必要があるのはなぜでしょうか。

ネットで調べましたが、腑に落ちず悶々としております。
どなたかご存知でしたら、ご回答いただけますと幸いです。
宜しくお願いいたします。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

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

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Comments

[think49]

質問前に確かめましょう。
アロー関数以外でコードを書けば、理由はわかります。

Answer 1

setIntevalの第一引数をアロー関数にする必要があるのはなぜでしょうか。

必ずしもその必要はありませんが、他の方法を使う場合、thisを固定する必要があります。

• tick自体をbindなどでthisを固定する
• いったん別な名前の変数にthisを受けて、内側の関数からはそちらを参照する

Comments

[shunki1023]

やはり普通の関数だと、グローバルを参照してしまうのですね、
どこがどこを参照するのかというのが、未だにピンと来ないので、
もう少し学習します。