Métodos do ciclo de vida de componentes ReactJS — Um mergulho profundo!

“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.

Fases e métodos do ciclo de vida do ReactJs

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:

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

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:

• 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:

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.

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.

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:

• componentWillUnmount 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.

Se você gostou de ler isso, considere dar alguns 👏 e compartilhar no Twitter.

Créditos
ReactJs component lifecycle methods — A deep dive, escrito originalmente por Mahesh Haldar

Um obrigado ao Mahesh Haldar por autorizar a traduzir esse fantástico artigo(Thanks Mahesh, for authorizing the translation of this spectacular article).

Tem interesse em trabalhar conosco? Nós estamos sempre procurando por pessoas apaixonadas por tecnologia para fazer parte da nossa tripulação! Você pode conferir nossas vagas aqui.