Как вызываются свои методы в компонентах React?

Question

[Rapen]

Имеется следующий код, есть компонент, в котором два метода componentDidMount, componentWillUnmount, один циклично обновляет состояние, другой перестает обновлять, как они срабатывают, если явно не вызываются. Код - создает время, и постоянно обновляет состояние времени.

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

[Антон Хмыров]

а в чем собственно вопрос?

[Rapen]

Эти методы как-то срабатывают... Но не явно, т.е не вызываются, хочется узнать. Как они вызываются?

[Rapen]

Т.е в какой именно момент?

[Андрей]

Rapen: это типо как обработчики событий, и сама либа улавливает это событие, но мне тоже интересно, может кто то подробнее и более точно раскажет, могу сказать что didmount срабатывает один раз, и это сразу после того как компонент появился в dom, umount сразу после того как исчез

[Islam Ibakaev]

Rapen: https://busypeoples.github.io/post/react-component...

Answer 1

[Vlad Feninets]

tick вызывается каждую секунду, а в его теле есть setState, который после того как отработает, автоматически вызывает метод render(). Поэтому каждую секунду происходит ререндер вашего компонента