Ciclo de vida do componente React: o que você precisa saber [2022]

No React, a aplicação é dividida nas menores partes possíveis conhecidas como Componentes. Os componentes podem ser de apresentação ou contêiner.

Quando falamos de componentes de apresentação, eles não têm lógica. Eles estão embutidos dentro dos componentes; ele só tem a interface do usuário.

Os componentes de contêiner são aqueles que usam componentes de apresentação e possuem lógica de negócios no componente. Esses componentes geralmente precisam manter objetos de estado local para alcançar um dos muitos casos de uso pelos quais podem ser responsáveis. Esses componentes usam componentes de apresentação como componentes filhos e transmitem dados usando vários adereços.

O React permite que você tenha componentes de classe ou funcionais. Um padrão predominante usado no ecossistema react é que o componente de apresentação é um tipo de componente funcional e os componentes de contêiner são do tipo classe.

O ciclo de vida de reação mostra o processo exato pelo qual os componentes passam e a razão por trás do ciclo de vida do componente de reação .

Componentes Funcionais

Estes são aqueles que não têm estado, e apenas manipulações usando os adereços são feitas.

Todos os métodos de ciclo de vida do componente ou o setState não podem ser usados ​​ou acessados ​​dentro de tais componentes.

Checkout: React Project Ideas

Componentes de classe

Esses componentes podem ter estado local e têm acesso a métodos de ciclo de vida e setState .

Um componente de classe típico no react se parece com: -

O ciclo de vida do componente tem três fases:-

1. Montagem
2. Atualizando
3. Desmontagem

Montagem

Quando qualquer componente é criado e inserido no DOM (Document Object Model), os métodos utilizados são:

● construtor()

● estático getDerivedStateFromProps()

● renderizar()

● componentDidMount()

Atualizando

Quando a prop ou o estado fornecido a um componente é alterado, a nova renderização do componente também é conhecida como fase de atualização. Nesta fase, abaixo estão os seguintes métodos de ciclo de vida que são chamados:

● estático getDerivedStateFromProps()

● shouldComponentUpdate()

● renderizar()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

Leia: Vue vs React: Diferença entre Vue e React

Desmontagem

Este método é chamado durante a desmontagem de qualquer componente: -

● componente willUnmount()

É a última função a ser invocada antes que o modelo de objeto do documento seja destruído. Ele funciona como limpeza para qualquer elemento construído durante componentWillMount.

Para fins de tratamento de erros no componente, existem alguns métodos reservados: -

● estático getDerivedStateFromError()

● componentDidCatch()

Métodos de ciclo de vida comumente usados ​​explicados em detalhes: -

● construtor (adereços)

Este método de ciclo de vida é usado durante a fase de montagem dos componentes. Pode-se ter um objeto de estado local declarado aqui. O super(props) é chamado dentro do construtor antes de qualquer outra instrução; caso contrário, ocorrerá um erro ao acessar this.props.

Se não houver o objetivo de declarar o objeto de estado local ou vincular o manipulador de eventos à instância, não há necessidade de escrever o método de ciclo de vida dos componentes.

O estado de chamada no constructor() não é avisado, pois acionaria a nova renderização antes que o ciclo anterior fosse encerrado.

Constructor() é o único lugar onde se pode atribuir diretamente o estado. Caso contrário, se houver necessidade de alterar o estado ou atribuir algo dentro dele, deve-se usar this.setSate .

● renderizar()

Dentro dos componentes deste método, a parte JSX é escrita. JSX é semelhante ao HTML, mas é uma sintaxe estendida de javascript. Quando estamos usando JSX, também podemos usar expressões Javascript dentro do método render.

O método render() de qualquer componente pai pode ter componentes filho dentro dele. Tudo seguindo o padrão de composição, que é a base dos componentes de reação.

Sempre que o método de renderização do pai é chamado, a renderização também é iniciada para os componentes filho, e a renderização pai é concluída somente após a conclusão de toda a renderização do filho.

O método de renderização é um método obrigatório; sem isso, o componente não pode ser feito, pois este é o único local onde a parte de visualização de um componente pode ser gravada.

O método de renderização é puro; isso significa que ele não pode modificar o estado dentro dele.

Para qualquer componente na fase de atualização, a re-renderização de um determinado componente acontecerá ou não, dependendo do tipo de retorno ou uso do método do ciclo de vida shouldComponentUpdate() .

Ter chamadas de API e qualquer interação com o navegador dentro desse método não é aconselhável e gerará um erro.

● componentDidMount()

Este método é invocado imediatamente após a montagem do componente. Agora o DOM está disponível para mais manipulações. Pode-se chamar setState dentro deste método.

Além disso, a interação com o navegador ou chamadas de API pode ser feita a partir daqui.

Este método é chamado apenas uma vez, que é durante o tempo de criação. O método não será executado em nenhuma outra parte de rerenderização e a lógica dentro dele também não será executada.

● componentDidUpdate()

Este é o mesmo que o componentDidMount.; pode-se obter um erro com a única diferença de que isso só é chamado quando ocorre a re-renderização de um componente. Este método não é chamado para a renderização inicial.

O setState e os efeitos colaterais podem ser feitos dentro deste método. Mas o setState precisa ser encapsulado em uma condição; caso contrário, pode-se acabar no loop infinito de renderização, e a renderização nunca terminaria.

Também componentDidUpdate não será chamado se shouldComponentUpdate() retornar false.

● componentWillUnmount()

Este método é chamado quando a fase de desmontagem de um componente está em andamento.

Dentro do método, idealmente, a remoção dos manipuladores de eventos e a limpeza da memória podem ser alcançadas.

A função setState() não deve ser chamada dentro disso, pois causa a re-renderização de um componente.

● shouldComponentUpdate()

Durante o desenvolvimento de aplicativos react, muitas vezes há casos em que é preciso evitar re-renderização desnecessária de componentes. Para alcançar este componente em classe, tem-se o método mencionado acima. Se esse método retornar false, a nova renderização do componente e seus componentes filho não acontecerá.

Os adereços anteriores podem ser verificados e comparados com os novos adereços fornecidos para garantir que não haja alteração e, em seguida, retornar false.

Chamar o método setState() dentro disso não é recomendado, pois isso causaria uma nova renderização.

Além disso, os efeitos colaterais não devem ser realizados dentro deste método.

Há também outra alternativa para este método. Pode-se usar React.pureComponents enquanto estende a classe. Isso é muito mais estável e confiável que o shouldComponentUpdate().

Por último, mas não menos importante, existem tipos de limites de erro de componentes de reação que estão presentes para capturar os erros.

É preciso envolver o componente com o componente de limite de erro simplesmente.

Dentro deste componente especial, existem dois métodos de ciclo de vida usados:-

1. estático getDerivedStateFromError()
2. componenteDidCatch()

Ambos são chamados se algum componente descendente lançar um erro.

O primeiro é chamado durante a fase de renderização, portanto, nenhum efeito colateral é permitido dentro dele. O segundo é chamado durante a fase de commit, então efeitos colaterais são permitidos dentro dele.

Leia também: Salário do desenvolvedor ReactJS na Índia

Aprenda cursos de engenharia de software online das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.

Conclusão

O ciclo de vida do componente react adiciona complexidade ao código, mas a execução e manipulação sistemáticas feitas através dos métodos parecem bastante atraentes do ponto de vista do desenvolvedor. O ciclo de vida do React permite reestruturar ou manipular os componentes.

Se você estiver interessado em aprender mais sobre react, desenvolvimento full-stack, confira o programa Executive PG do upGrad & IIIT-B em desenvolvimento de software full-stack, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos , e atribuições, status de ex-alunos do IIIT-B, projetos práticos práticos e assistência de trabalho com as principais empresas.

Prepare-se para uma carreira do futuro

Inscreva-se agora para o Programa PG Executivo em Desenvolvimento Full Stack