Class components

Dando sequência ao conteúdo, criaremos um componente que gerencie o seu estado.

Class Component

Até o momento, utilizamos funções para criar componentes react. No entanto, para gerenciar o estado é mais vantajoso utilizar o conceito de Class Component.

Então, acompanhando a aula e todos os detalhes da criação e das alterações, implemente o código abaixo:

import React from 'react';
import ReactDOM from 'react-dom';

class ClockClass extends React.Component {

  constructor(props) {
    super(props)
    this.state = { date: new Date() }
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ date: new Date() });
    }, 1000);
  }

  render() {
    return (<div><h1>Hora: {this.state.date.toLocaleTimeString()} </h1></div>);
  };
}

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

Limpando o intervalo

Nosso componente está fazendo uma chamada a cada segundo para atualizar o estado. Porém, caso precise remover esse component da tela, é interessante limpar esse intervalo para não gastar recursos à toa.

O setInterval( ) retorna um id. Então, vamos armazenar esse id. Na função componentDidMount( ):

componentDidMount() {
    this.timerId = setInterval(() => {
      this.setState({ date: new Date() });
    }, 1000);
  }

Agora, para limpar o setInterval( ) , usaremos uma função que é executada quando o componente é desmontado: componentWillUnmount( ).

Então, abaixo da função componentDidMount( ) implemente o código a seguir:

componentWillUnmount() {
    clearInterval(this.timerId)
  }

Essa alteração não ocasionará mudanças visuais, mas o componente está gerenciando melhor os recursos.