@Rapen

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

Имеется следующий код, есть компонент, в котором два метода 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')
);
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 1
fnnzzz
@fnnzzz
front-end dev
tick вызывается каждую секунду, а в его теле есть setState, который после того как отработает, автоматически вызывает метод render(). Поэтому каждую секунду происходит ререндер вашего компонента
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы