Introdução ao ciclo de vida do React

Como sabemos que os componentes são componentes básicos da reação, é importante conhecer os diferentes estágios envolvidos no ciclo de vida de um componente de reação. Neste artigo, descreveremos os diferentes eventos e métodos envolvidos no ciclo de vida de um componente. Além disso, abordaremos alguns exemplos que fornecerão uma imagem clara do ciclo de vida do componente React.

Fases do ciclo de vida de reação

O ciclo de vida dos componentes é definido como a sequência de métodos invocados em diferentes estágios de um componente. A seguir, estão diferentes fases envolvidas no ciclo de vida de um componente de reação:

1. Inicialização

Este estágio requer que o desenvolvedor defina propriedades e o estado inicial do componente. Isso é feito no construtor do componente. O código a seguir mostra a fase de inicialização de um componente de reação:

Código:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Montagem

Montagem é a fase do ciclo de vida do reagente que ocorre após a conclusão da inicialização. A montagem ocorre quando o componente é colocado no contêiner DOM e o componente é renderizado em uma página da web. A fase de montagem possui dois métodos que são:

  • compnentWillMount () : esse método é chamado logo antes que o componente seja colocado no DOM, ou seja, essa função é chamada imediatamente antes da função de renderização ser executada pela primeira vez.
  • componentDidMount () : este método é chamado logo após o componente ser colocado no DOM, ou seja, essa função é chamada logo após a execução da função de renderização. Pela primeira vez.

A partir do nome dos dois métodos acima, entendemos o significado das palavras-chave “Will” e “Did”. Agora está claro que “Will” é usado antes de um evento específico e “did” é usado no caso de depois de um evento específico.

3. Atualização

Atualização é uma fase em que o estado e as propriedades preenchidas no momento da inicialização são alterados, se necessário, após alguns eventos do usuário. A seguir, são apresentadas diferentes funções chamadas durante a fase de atualização:

  • componentWillReceiveProps (): Esta função é independente do estado do componente. Esse método é chamado antes que um componente montado no DOM obtenha seus objetos reatribuídos. A função aceita novos adereços que podem ser idênticos ou diferentes dos adereços originais. Principalmente, algumas verificações de pré-renderização podem ser aplicadas nesta etapa.
  • shouldComponentUpdate (): Às vezes, é desejável não mostrar os novos objetos na página de saída. Para conseguir isso, esse método retorna false, o que significa que os adereços recém-renderizados não devem ser exibidos na página de saída.
  • componentWillUpdate (): essa função é chamada antes que um componente seja renderizado novamente, ou seja, esse método é chamado uma vez antes que a função render seja executada após a atualização.
  • componentDidUpdate (): essa função é chamada depois que um componente é renderizado novamente. Esse método é chamado uma vez depois que a função de renderização é executada após a atualização.

4. Desmontagem

Esta é a última fase do ciclo de vida do componente e, nessa fase, um componente é desanexado do contêiner do DOM . O método a seguir se enquadra nessa fase.

  • componentWillUnmount (): essa função é chamada antes que um componente seja finalmente desanexado do contêiner DOM, chamado este método quando um componente é totalmente removido da página e isso mostra o fim de seu ciclo de vida.

Exemplo de ciclo de vida do React

Aqui veremos alguns exemplos de código que mostram o ciclo de vida de um componente de reação.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Quando o programa acima é executado inicialmente, ele mostra a saída abaixo na página da web.

Ao clicar na área Clique aqui, o texto será alterado para o seguinte:

Agora, no console, você pode ver a sequência de métodos chamada, o console mostrará a saída abaixo anexada:

Depois de clicar na tela, a nova renderização ocorrerá e mostrará o seguinte no console:

A saída do console acima fornece um entendimento claro dos métodos do ciclo de vida de reação chamados durante o ciclo de vida do componente de reação.

Conclusão

Depois de cobrir os detalhes das diferentes fases envolvidas no ciclo de vida do reagente, fica claro que existem métodos de ciclo de vida que são chamados automaticamente. Esses métodos de ciclo de vida em diferentes fases de um componente nos dão a liberdade de executar eventos personalizados quando um componente é criado, atualizado ou destruído. Além disso, esses métodos nos permitem lidar com adereços e alterações de estado, além de integrar bibliotecas de terceiros facilmente.

Artigos recomendados

Este é um guia para o ciclo de vida do React. Aqui discutimos fases do ciclo de vida do reagente, como inicialização, montagem, atualização e desmontagem, juntamente com o exemplo. Você também pode consultar os seguintes artigos para saber mais -

  1. React Native vs React
  2. Ciclo de vida ágil
  3. Ciclo de Vida ITIL
  4. Ferramentas de implantação Java
  5. Guia para o botão React Native

Categoria:

Desenvolvimento de software