O que são métodos de ciclo de vida de componentes no React JS ??

Como todos nós, os componentes React também nascem, crescem e morrem!

(Habilelabs) (7 de dezembro de 2020)

Por Payal Mittal

métodos de ciclo de vida de componentes em reactjs
Métodos de ciclo de vida de componentes em React.js

Cada componente da classe React passa por uma série de“ métodos de ciclo de vida ”. Basicamente, tudo no React consiste em componentes ou uma parte dos componentes.

Esses componentes estão sujeitos a um determinado ciclo de vida, quase como o de qualquer criatura viva na Terra. Eles nascem, crescem e finalmente morrem. A fase em que nascem é chamada de montagem, quando crescem é chamada de atualização e a última fase da morte é conhecida como desmontagem.

Todo esse processo é chamado de ‘Ciclo de Vida do Componente’. Para cada uma dessas fases, React.js renderiza certos métodos integrados chamados de métodos de ciclo de vida que controlam o comportamento dos componentes em um aplicativo.

Neste blog, vamos passar por esse ciclo de vida e obter para saber sobre esses métodos de ciclo de vida –

O que são métodos de ciclo de vida de componentes?

Os métodos de ciclo de vida do componente são divididos em três fases diferentes, como-

  • Montagem
  • Atualização
  • Desmontagem

Todo o ciclo de vida do componente pode ser compreendido por esta ilustração visual simples –

Diagrama do ciclo de vida do componente

Agora, discutiremos cada uma das fases e seus métodos em detalhes. Vamos então –

✔ Métodos de ciclo de vida de montagem

Depois de concluir o componente inicialização, a montagem do componente começa em que o componente é criado e inserido no DOM.

Aqui, discutiremos os métodos de ciclo de vida mais comumente usados-

1. constructor ()

O constructor() é chamado primeiro antes do início da montagem e é basicamente usado para servir esses dois finalidades-

Em vez de usar setState(), você pode atribuir diretamente o estado inicial a this.state() no método constructor. Aqui está como podemos definir nosso estado-

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

O próximo na linha é o método render()! Ele monta o componente no DOM e os renderiza na IU. Este método é invocado para examinar os atributos this.state e this.props sempre que houver alguma variação no state ou props.

render é o método mais comumente usado de todos no React. Se você deseja renderizar elementos no DOM, render() é o método pelo qual você deve esperar, porque você pode escrevê-los aqui.

Sempre que chamado, ele pode retornar muitos tipos, ou seja, strings, números, matrizes, fragmentos, Booleanos ou null valor, portal ou elementos React. Alguns exemplos são fornecidos aqui –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Observação : Se o método componentShouldMount retornar booleano false, o método de renderização não será evocado.

3. componentDidMount ()

Este método é chamado imediatamente após o componente ser inserido no DOM por meio do método render . É chamado apenas uma vez em um ciclo de vida.

  • Se você deseja configurar qualquer assinatura, este é um lugar tão bom quanto qualquer outro para fazê-lo. Mas, você terá que cancelar a assinatura em componetWillUnmount().
  • Além disso, é um bom lugar para instanciar uma solicitação de rede se você precisar carregar dados de um remoto endpoint.
  • Você pode até chamar setState() aqui. Embora isso vá acionar uma renderização novamente, você não verá pelo menos o estado intermediário. No entanto, você deve ter cuidado ao usar isso porque causa problemas de desempenho. Na verdade, você deve atribuir o estado inicial no método constructor(), conforme aconselhável. Mas essa abordagem é útil quando você precisa medir um nó DOM antes de renderizar algo que depende de seu tamanho.

✔ Atualizando métodos de ciclo de vida

Diferente de Montagem fase que ocorre apenas uma vez durante a montagem do componente, a fase de Atualização pode ocorrer várias vezes.

Sempre que houver qualquer alteração nas propriedades / estado do componente que precisa ser atualizado, um cronômetro chama para render e componentDidupdate reconhecer, atualizar e processar a mudança, a fase de atualização entra em ação.

1. static getDerivedStateFromProps ()

Este é o primeiro método que é chamado na fase de atualização do ciclo de vida. Ele pode ser chamado várias vezes porque é chamado sempre que o método render é iniciado. Portanto, é óbvio que ele é chamado durante as fases de montagem e atualização.

Este método não é muito comum e raramente usado em casos específicos, por exemplo, quando o estado do componente varia com as mudanças nos adereços ao longo do tempo. Como o nome indica, ele deriva do estado dos adereços.

2. shouldComponentUpdate ()

Este método é chamado quando o componente está prestes a ser renderizado novamente. Ele determina se as mudanças atuais em states / props estão afetando a saída do componente. Ele é usado apenas como um meio de otimização de desempenho e nos informa deve o componente ser atualizado ou não, que é expresso por true ou false valores. Por padrão, ele retorna true.

Se

shouldComponentUpdate() retorna false valor, significa que você está dizendo ao React para pular esta atualização e, portanto, os métodos render e componentDidUpdate não serão chamados.

Trabalho do método shouldComponentUpdate

No entanto, você também pode evitar a renderização desnecessária usando

React.PureComponent que permite comparar o novo e o antigo state / props e torna improvável que você ignore qualquer atualização necessária.

3. render ()

Em seguida, vem render. Se ele será chamado ou não, depende do valor retornado por shouldComponentUpdate. Ele será acionado apenas no caso em que true for retornado.

4. getSnapshotBeforeUpdate ()

Depois que render for chamado,

getSnapshotBeforeUpdate vem a seguir. Não é comumente usado, mas é muito útil em certos casos específicos, como quando você precisa acessar algumas informações no DOM e alterá-las, logo após sua atualização.

Este método permite que o componente capturar algumas informações (altura de rolagem) do DOM para que possa ser ajustado posteriormente (após a atualização). Porém, você precisa entender que a altura de rolagem capturada aqui indica a altura antes de ser atualizada para DOM.

Podemos passar prevState e prevProps como argumentos, conforme fornecido aqui –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Este método é chamado imediatamente após o componente ser atualizado e renderizado novamente. Ele recebe os prevState e prevProps como parâmetros e também pode acessar o estado ou props recém-alterados.

No entanto, é altamente recomendável nunca definir diretamente o estado dentro desta função, caso contrário, isso acionará ainda render e componentDidUpdate.

Por meio desse método, podemos calcular a scrollHeight diferença entre o que era antes de ser atualizado.

Este é apenas um caso de uso, são vários outros como –

👉 Para buscar dados do servidor

👉 Para acessar os nós DOM do componente React

Para obter detalhes sobre seus casos de uso , verifique a documentação oficial –

React.Component – React

Esta página contém uma referência de API detalhada para a classe de componente React definição. Ele pressupõe que você “esteja familiarizado com…

reactjs.org

✔ Métodos de ciclo de vida de desmontagem

Esta é a última fase em que um componente de reação passa, onde é desmontado do DOM e destruído. Há apenas um método de ciclo de vida nesta fase.

1. componentWillUnmount ()

componentWillUnmount método é chamado primeiro na fase de desmontagem, logo antes de o componente ser destruído.Este é o lugar onde você pode executar qualquer método de limpeza, basicamente cancelando solicitações de rede, invalidando cronômetros ou limpando assinaturas indesejadas que foram criadas no método componentDidMount .

Resumo:

Existem alguns outros métodos que são invocados no caso de um erro ser lançado por um componente descendente, esses métodos são chamados de métodos de ciclo de vida de tratamento de erros. Você os encontrará aqui .

Eram todos codificadores !! Espero que você entenda melhor os métodos de ciclo de vida do componente React por meio deste blog. Volte para você em outro blog esclarecedor.

Até então, boa leitura !! 🙃

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *