React -JS таймер не обновляется, когда я изменяю функцию стрелки на простую функцию?

Question

Я играл с React Example, который находится на его официальном сайте:

Моя проблема немного сложнее:

У меня есть часы Component, которые отображают текущее время на экране, используя

 new Date().toLocaleTimeString()

Код : Этот код отлично работает

import React, { Component } from 'react'
import ReactDOM from 'react-dom';

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

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),                    //problematic line
      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>
    )
  }
}



function Root() {
  const element = <Clock />
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

export default Root;

Задача Но проблема в том, что когда я меняю () => this.tick() на this.tick() или this.tick, таймер запускается только в первый раз и не работает непрерывно. Я очень запутался в этом случае:

Может ли кто-нибудь сказать мне, в чем разница между () => this.tick() и this.tick() в этом случае или почему таймер не обновляется, когда я изменяю () => this.tick() на this.tick()?

Answer 1

Единственная разница, которая влияет на работу этого кода, заключается в том, что

() => this.tick() - это функция, где

this.tick() - оператор вызова функции.

Таким образом, первый параметр установленного таймера должен быть функцией, которая вызывается после временного интервала. Когда вы изменяете его на this.tick (), setTimeout будет пытаться выполнить this.tick () (), который не будет работать. Это работает в первый раз, когда функция setTimeout инициализируется, а параметр (который является функцией) вызывается вместо инициализации.

Answer 2

Если вы посмотрите на функцию setInterval, вы заметите, что первый аргумент (firstArg) должен быть функцией, которая возвращает другую функцию, а второй аргумент (secondArg) должен быть числом или массивом чисел, представляющих требуемую задержку. повторить функцию, указанную в качестве первого аргумента.

setInterval(firstArg, secondArg) // typeof firstArg must be a function that returns something

В вашем случае вы просто передаете this.tick () или this.tick, который ничего не возвращает. Поскольку this.tick () ничего не возвращает, setInterval не может постоянно обновлять состояние «date».

Если изменить тик () на

tick() {
  return () => this.setState({ //returns anonymous function
    date: new Date()
  });
}

или

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

Вы можете достичь этого.

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

Answer 3

Вот как это в JavaScript работает.

const object1 = {
  method(){
    setTimeout(function () { console.log(this) })
  }
}

const object2 = {
  method(){
    setTimeout(() => { console.log(this) })
  }
}

// the same as
var object3 = {
  method: function method() {
    var _this = this;

    setTimeout(function() {
      console.log(_this);
    });
  }
};

object1.method(); // window
object2.method(); // object2
object3.method(); // object3