Pular para o conteúdo principal

React - Ciclo de vida

Os componentes no React, assim como recursos de diversas outras tecnologias, possui um ciclo de vida bem definido, ou seja, sabemos exatamente as etapas executadas da criação a destruição de um componente.

Os métodos do ciclo de vida de componentes são invocados em diferentes momentos, e eles podem ser organizados em três grupos: "mounting" onde são montados na tela, "updating" onde são atualizados e "unmounting" onde são desmontados e removidos da tela.

Mounting

Nesse momento temos a inicialização, a construção dos componentes (pré/pós) e a renderização.

constructor

Chamado antes que o componente seja montado:



getDerivedStateFromProps

Executado antes da renderização (render):



render

Único método puro, devendo sempre se manter puro, ou seja, sem modificar o estado do componente:



componentDidMount

Executado após a montagem do componente:



componentWillMount (legado, não deve ser usado)

Executado antes da montagem, e funcionará apenas até a versão 17.

Updating

Aqui temos o recebimento de propriedades, a definição e a atualização deve ocorrer a atualização do componente (caso ele deva ser atualizado) a renderização e a confirmação da atualização.

getDerivedStateFromProps

Funciona da mesma forma descrita em "mounting".

shouldComponentUpdate

Executado antes da renderização, ao receber novas propriedades ou estado e permite determinar se a renderização deve ou não ocorrer:



render

Funciona da mesma forma descrita em "mounting".

getSnapshotBeforeUpdate

Executado antes do retorno da renderização mais recente seja escrito no DOM:



componentDidUpdate

Executado após uma atualização:



componentWillReceiveProps (legado, não deve ser usado)

Executado antes que o componente montado receba propriedades, e funcionará apenas até a versão 17.

componentWillUpdate (legado, não deve ser usado)

Executado antes da renderização quando novas propriedades ou estado estão sendo recebidos, e funcionará apenas até a versão 17.

Unmounting

Na última etapa temos apenas a sinalização do inicio da destruição dos componentes.

componentWillUnmount

Executado antes que um componente seja desmontado ou destruído:


Exemplo

Aqui pode ser encontrado um exemplo que demonstra todo ciclo de vida de um componente, onde um componente de teste é criado, atualizado e depois removido, onde cada método do ciclo de vida é chamado gerando uma mensagem no console.

Ao iniciar a aplicação não temos nada no console:



Ao clicar no botão "Mostrar componente" nosso componente é criado passando pela etapa de "mounting":



Com o componente criado temos agora o botão "Mudar estado do componente teste!" que quando clicado inicia a etapa "updating":



Por fim, ao clicar no botão "Esconder componente" nosso componente é removido, passando pela etapa "unmounting":


Comentários

Mais visitadas

Array no PL/SQL (Oracle)

Trabalhar com estruturas indexadas pode nos poupar muito trabalho, deixar o código mais limpo e reutilizável, pois bem vamos dar um exemplo de como fazer isso no PL/SQL. Criaremos um tipo table que seja capaz de armazenar nomes de uma tabela de funcionários de forma indexada, e em seguida mostraremos o que foi armazenado, segue o código: 1: declare 2: -- tipo tabela contendo apenas texto e indexado 3: type TipoNomFunc is table of varchar 2(200) index by binary_integer; 4: -- variável do nosso tipo (como nosso tipo é indexado ele funcionará como um array) 5: func TipoNomFunc; 6: -- indice para loop 7: indice number := 1; 8: -- 9: begin 10: -- 11: -- cursor para nossa tabela de funcionarios 12: for emps in ( 13: select * 14: from funcionarios 15: ) 16: loop 17: -- colocamos o nome do funcionario em nosso "vetor" 18: func(indice) := emps.nom_funcionario; 19: -- incrementamos o indice 20:...

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker

Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker Neste guia, vamos criar uma aplicação básica que acessa um banco de dados PostgreSQL e realiza operações CRUD (Create, Read, Update, Delete). Vamos usar Flask e executar tudo com Docker. Sem estilos ou extras, apenas o essencial. Estrutura do Projeto crud-app/ |-- app/ | |-- app.py | |-- templates/ | | |-- index.html | | |-- edit.html |-- Dockerfile |-- requirements.txt |-- docker-compose.yml Passo 1: Dependências Crie um arquivo requirements.txt com as seguintes linhas: Flask==2.2.2 Flask-SQLAlchemy==3.0.2 psycopg2-binary==2.9.3 Werkzeug==2.2.2 Passo 2: Aplicação Flask Arquivo app/app.py : from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) # Configuração do banco de dados app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:password@db:5432/crud_db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db...

Listar arquivos existentes em diretório (Delphi)

Mostraremos uma maneira simples e prática para listar o conteúdo de um diretório com a opção de incluir nessa listagem os arquivos de seus subdiretórios. No exemplo abaixo temos um Edit para receber o diretório a ser pesquisado um CheckBox para indicar se os subdiretórios entrarão na pesquisa um botão para efetuar a pesquisa e um Memo para listar os arquivos encontrados, no final um Edit que receberá o cálculo final (em bytes) da soma do tamanho dos arquivos. procedure TForm1.Button1Click(Sender: TObject); begin   tamanhoTotal := 0;   memLista.Lines.Clear;   ListarArquivos(edtDiretorio.Text, chkSub.Checked);   Edit1.Text := IntToStr( tamanhoTotal ); end; procedure TForm1.ListarArquivos(Diretorio: string; Sub:Boolean); var   F: TSearchRec;   Ret: Integer;   TempNome: string; begin   Ret := FindFirst(Diretorio+'\*.*', faAnyFile, F);   try     while Ret = 0 do ...