Blog fellyph cintra - react js

Ciclo de vida de um componente react

Ciclo de vida de um componente react, um recurso importante dentro do React onde temos maior controle sobre a nossa aplicação. Imagine você quer criar um Timer que irá contar somente quando o componente estiver sendo exibido na tela.

React JS

Desenvolver aplicações web pode ser uma tarefa complicada, especialmente quando se trata de criar interfaces ricas e interativas. Felizmente, existem frameworks e bibliotecas que podem simplificar o processo. Um dos mais populares é o React JS.

React JS é uma biblioteca javascript criada pelo Facebook. É open source, o que significa que qualquer um pode usá-la gratuitamente. Ele concentra-se em criar interfaces de usuário e é muito popular entre os desenvolvedores front-end. Nesse post conferiremos como funciona o ciclo de vida de um componente react.

Quais são as funções do Ciclo de vida de um componente react

React nos fornece uma série de funções dentro do nosso componente, para cada fase do seu ciclo de vida de um componente react.

Podemos acompanhar quando:

  • Montado — Mounting
  • Atualizado — Updating
  • Desmontado — Unmounting
  • Manipulação de erros— Error Handling

Eventos de montagem

Temos o constructor e a função render executados quando o nosso componente é criado, mas temos uma função específica para quando o nosso componente é criado componentDidMount(), essa função será executada após o constructor e render serem executados. Elas possuem a seguinte ordem:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Eventos de atualização

Quando o nosso componente é atualizando chamamos uma série de funções na seguinte ordem: 

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

As funções marcadas como bold são as funções mais usadas, o resto são utilizadas em casos bem específicos.

Eventos de desmontagem

Temos um evento específico para quando o nosso componente é removido do nosso. 

  • componentWillUnmount()

Mas vocês podem se perguntar, mas que chamar uma função para quando o meu componente for removido da tela. Podemos ter alguns casos, temos um formulário e o usuário não enviou os dados, queremos salvar essa informação caso ele volte para esse componente ou simplesmente remover um listener, ou um Timer, nesses casos temos o controle de executar qualquer ação antes desse componente seja removido do virtual DOM.

Eventos de erro do Ciclo de vida de um componente react

Se algum erro ocorrer durante a renderização, durante alguma função do ciclo de vida ou no construtor de qualquer componente filho.

  • static getDerivedStateFromError() 
  • componentDidCatch()

Durante a evolução do React algumas funções ficaram para trás e foram descontinuadas, são elas:

  • componentWillMount()
  • componentWillUpdate()
  • componentWillReceiveProps()

Essas funções não são mais recomendadas pelo time do React, são classificadas como UNSAFE.

Exemplo 1

class CicloDeVida extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
  }
  
  componentDidMount() {
    console.log('montou');
  }
  
  render() {
    console.log('render');
    return <h1>Ciclo de vida de um Component</h1>;
  }
}


ReactDOM.render(
  <CicloDeVida />,
  document.getElementById('root')
);

Code language: JavaScript (javascript)

No Exemplo 1, temos apenas a chamada da função componentDidMount() com um console.log, para testarmos a ordem também adicionamos logs no construtor e no método render, e a saída será a seguinte:

Essa será a ordem de execução, Ciclo de vida de um componente react
Essa será a ordem de execução.

Exemplo 2

class CicloDeVida extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.state = {timer: new Date()};
  }

  updateTimer() {
    this.setState({
      timer: new Date()
    });
  }
  
  componentDidMount() {
    console.log('montou');
     this.timerFunctionContainer = setInterval(
      () => this.updateTimer(),
      1000
    );
  }
  
  componentDidUpdate() {
    console.log('atualizou');
  }
  
  componentWillUnmount() {
    console.log('desmontou');
    clearInterval(this.timerFunctionContainer);
  }
 
  render() {
    console.log('render');
    return <React.Fragment>
      <h1>Ciclo de vida de um Component</h1>
      <p>Hora atual: {this.state.timer.toLocaleTimeString()}</p>
      </React.Fragment>;
  }
}


ReactDOM.render(
  <CicloDeVida />,
  document.getElementById('root')
);

Code language: JavaScript (javascript)

No exemplo 2, incluímos mais funcionalidades no nosso exemplo, agora temos um timer para exibir a hora atual. Adicionamos a propriedade timer no nosso estado. Na função componentDidmount irá incluir um setIterval para atualizar o timer a cada segundo, mas para garantir nenhuma categoria de erro removemos o setInterval antes de desmontar o nosso componente. Outra observação sobre a ordem de chamada das funções:

Blog fellyph cintra - console 2
Cada vez que o estado é atualizado chamamos, render e a função componentDidUpdate
Também criei um infográfico com o ciclo de vida de um componente react
Também criei um infográfico com o ciclo de vida de um componente react

Gostou do post sobre o ciclo de vida de um componente react, confira no blog mais posts sobre react, no post anterior falei sobre eventos no react e qualquer dúvida deixe o comentário.


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *