E

Métodos do ciclo de vida de componentes ReactJS

• 0 views

“ReactJS é uma biblioteca de javascript para construir interfaces de usuário” essa é uma linha da introdução oficial sobre React.

O que é interface do usuário?

O usuário interage com o aplicativo, clicando, pressionando uma tecla ou executando muitos outros eventos nos componentes da UI. Todos os componentes da UI nascem no navegador e morrem em algum momento. Toda a interface é governada por um deus, esse é o usuário.

A interface do usuário é um playground multi-opções onde o mesmo pode fazer qualquer coisa e as bibliotecas como React nos ajudam a criar esse playground.

Quais são os métodos do ciclo de vida e por que são importantes?

Ao nosso redor, tudo passa por um ciclo de vida, nascimento, crescimento e em algum momento a morte. Considere uma árvore, qualquer aplicação de software, você mesmo, um componente div container ou UI em um navegador da Web, todos eles tem seu nascimento, crescimento obtendo atualizações e morte.

Os métodos do ciclo de vida de componentes são invocados em diferentes fases. Suponhamos que estamos criando o aplicativo do YouTube, então obviamente sabemos que nosso aplicativo usará a rede para fazer buffer dos vídeos e utilizará a energia da bateria (vamos assumir apenas esses dois). Se o usuário mudar para outro aplicativo depois de reproduzir o vídeo, nós como incríveis desenvolvedores devemos ter certeza de que estamos usando os recursos de rede e da bateria da maneira mais eficiente possível. Então sempre que o usuário mudar para outro aplicativo, podemos "parar/pausar" o buffer do vídeo, o que deixará de usar esses recursos.

Isto é o que os métodos do ciclo de vida do React nos fornece para que o desenvolvedor possa produzir uma aplicação de qualidade e garantir que nós possamos realmente planejar o que e como fazer alguma mudança em vários momentos do ciclo de vida do componente, seja na montagem, atualização ou desmontagem da interface UI.

Ter uma ótima compreensão sobre o ciclo de vida do componente superaria sua capacidade de desenvolver interfaces React de usuário de qualidade.

Quatro fases de um componente React

O componente React, como qualquer outra coisa no mundo, passa pelas seguintes fases

  • Inicialização
  • Montagem
  • Atualização
  • Desmontagem

A seguinte imagem é a representação visual das fases e os métodos do ciclo de vida do React.

Para visualizar a implementação desses métodos do ciclo de vida, criaremos um aplicativo React de um player de música chamado Contra music player. Vamos começar nossa discussão sobre todas essas fases.

1 - Inicialização

Nesta fase, o componente React se prepara para sua inicialização, configurando os estados iniciais e props padrões se houverem.

A inicialização do aplicativo Contra Music Player se parece com isso:


class ContraMusicPlayer extends React.Component
constructor(props) {
  super(props);
  this.state = {
    volume: 70,
    status: 'pause'
  }
}
ContraMusicPlayer.defaultProps = {
  theme: 'dark'
};

O componente está configurando o estado inicial no construtor, que pode ser alterado posteriormente usando o método setState.

O defaultProps é uma propriedade do Componente para definir todo o valor padrão das props, e podem ser substituídos por novos valores também.

Ao renderizar como <ContraMusicPlayer/>, o player começará com volume de 70% em estado pausado com tema escuro.

Ao renderizar como <ContraMusicPlayer theme="light"/> o player começará com o volume de 70% em estado pausado com tema claro.

2 - Montagem

Depois de preparar com todas as necessidades básicas, estado e props, o nosso Componente React está pronto para ser montado no DOM do navegador. Esta fase fornece métodos que podem ser invocados antes e depois da montagem dos componentes. Os métodos que são chamados nesta fase são:

  • componentWillMount: É executado quando o componente estiver prestes a ser montado no DOM da página. Assim, após esse método ser executado o componente irá criar o nó no navegador. Todas as coisas que você deseja fazer antes do componente ser montado, devem ser definidas aqui. Este método é executado uma vez em um ciclo de vida de um componente e antes da primeira renderização.

Uso:: componentWillMount é usado para inicializar os estados ou adereços, há um grande debate para fundir isso com o construtor.

  • render, monta o componente no navegador. Este é um método puro, o que significa que ele dá a mesma saída sempre que a mesma entrada é fornecida.

O método de renderização para o nosso player de música pode ser assim:


render() {
  &lt;div&gt;
     &lt;PlayHeader&gt;
       &lt;Status/&gt;
       &lt;VolumeBar/&gt;
       &lt;SeekBar/&gt;
    &lt;/PlayHeader&gt;
   &lt;/div&gt;
}
  • componentDidMount: Este é o método que é executado depois que o componente foi montado no DOM. Este método é executado uma vez em um ciclo de vida de um componente e será após a primeira renderização. Com esse método podemos acessar o DOM, devemos inicializar bibliotecas JS como D3 ou Jquery, que precisa acessa-lo.

Uso:: Em nosso aplicativo de player de música, queremos desenhar os gráficos de ondas sonoras da música completa, esse é o método certo para se integrar ao D3 ou a outras bibliotecas de JavaScript de terceiros.

O exemplo a seguir mostra as configurações do highcharts quando o DOM está pronto:

componentDidMount() {
 if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        // Set container which the chart should render to.
        this.chart = new Highcharts[this.props.type || &quot;Chart&quot;](
            this.props.container,
            this.props.options
        );
}
Onde você deve fazer as chamadas API?

As chamadas da API devem ser feitas sempre no método componentDidMount.

3 - Atualização

Esta fase começa quando o componente React já nasceu no navegador e cresce recebendo novas atualizações. O componente pode ser atualizado de duas maneiras, através do envio de novas props ou a atualização do seu estado.

Vamos ver a lista de métodos disponíveis quando o estado atual é atualizado chamando setState:

  • shouldComponentUpdate: Diz ao React que, quando o componente recebe novas props ou estado, o React re-renderiza ou pode ignorar a renderização do componente. Este método é uma questão, “O Componente foi atualizado?” Portanto, esse método deve retornar verdadeiro ou falso, e então o componente seria re-renderizado ou ignorado. Por padrão, esse método retorna verdadeiro.

Uso:: O exemplo a seguir é um dos casos em que eu gostaria de re-renderizar o componente somente quando o status das props mudarem.

shouldComponentUpdate(nextProps, nextState) {
  let shouldUpdate = this.props.status !== nextProps.status;
  return shouldUpdate;
}

Este método geralmente é usado quando a renderização é um método muito pesado, logo você deveria evitar renderizar completamente aquele componente. Por exemplo, suponha que para cada renderização, o componente gere mil números primos, consideremos que algum aplicativo possui esse tipo de lógica, então podemos controlar quando é necessário apenas o componente ser renderizado.

  • componentWillUpdate: É executado somente quando shouldComponentUpdatedevolver true. Este método é usado apenas para preparar a próxima renderização, semelhante ao componentWillMount ou ao construtor. Pode haver algum caso de uso quando precisar de algum cálculo ou preparação antes de renderizar algum item, este é um bom lugar para fazer isso.

  • render: Aqui então o componente é processado e renderizado na tela.

  • componentDidUpdate: É executado quando o novo componente (já atualizado) foi atualizado no DOM. Este método é usado para reativar as bibliotecas de terceiros, usado para garantir que essas bibliotecas também atualizem e recarreguem.

A lista de métodos que serão chamados quando o componente pai envia novas props aos filhos é a seguinte:

  • componentWillReceiveProps é executado quando as props mudaram e não são processados ​​pela primeira vez. Às vezes, o estado depende das props, portanto, sempre que as props mudam o estado também deve ser sincronizado. Este é o método onde deve ser feito isso. Um método semelhante para o estado não existe antes que haja há mudança de estado porque as props são lidas somente em um componente e nunca podem depender do estado.

Uso:: É assim que o estado pode ser mantido sincronizado com os novas props.

componentWillReceiveProps(nextProps) {
  if (this.props.status !== nextProps.status) {
    this.setState({
      status: nextProps.status
    });
  }
}

O resto dos métodos se comportam exatamente do mesmo jeito definido acima, em termos de estado também.

  • ComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

4 - Desmontagem

Nesta fase, o componente não é mais necessário e será desmontado do DOM. O método que se chama nesta fase é o seguinte:

  • componentWillUnmoun Este método é o último método no ciclo de vida. Isso é executado imediatamente antes de o componente ser removido do DOM.

Uso: neste método, fazemos todas as limitações relacionadas ao componente. Por exemplo, no logout, os detalhes do usuário e todos os tokens de autenticação podem ser apagados antes de desmontar o componente principal.

componentWillUnmount() {
  this.chart.destroy();
  this.resetLocalStorage();
  this.clearSession();
}

Originally published in the Creditas Tech