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":

Centralizar Texto em Edit

Como todos sabemos o Edit mantém todo texto digitado a esquerda, o que não fica bem quando o usamos para a entrada de números, pois bem, o exemplo abaixo apresenta uma alternativa para centralizar um determinado valor dentro de um Edit: procedure EditChange(Sender: TObject); var vl_label : TLabel; //variável do tipo Label begin vl_label := TLabel.Create(self); //criamos um label WITH vl_label DO BEGIN Font.Name := TEdit(sender).Font.Name; //pegamos a fonte usada no edit Caption := TEdit(sender).Text; //pegamos o conteúdo do edit SendMessage(TEdit(sender).Handle, EM_SETMARGINS, EC_LEFTMARGIN, (TEdit(sender).Width-vl_label.Width) div 2); //centraliza no label e retorna para o edit END ; vl_label.Free; end ;

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...

Funções de Data e Hora (Delphi)

É muito comum nos depararmos no dia a dia com a necessidade de manipular datas e horas, seja para um calculo de permanência, dias de atraso enfim, é praticamente escapar de alguma situação que necessite desse tipo de controle. Assim como a necessidade e se utilizar algum recurso para manipular as datas e horas de alguma maneira e freqüente, as duvidas de como o faze-lo também é, basta um breve olhar em qualquer fórum especializado e lá está, alguma duvida relacionada, por isso decidi falar um pouco sobre uma unit muito poderosa chamada DateUtils para a manipulação de data e hora, com um grande numero de métodos e classes que facilitam a vida de qualquer um. Alguns exemplos: CompareDate(constA, B: TDateTime): TValueRelationship; Compara apenas a data de dois valores (do tipo TDateTime) retornando: LessThanValue O primeiro valor é menor que o segundo EqualsValue Os valores são iguais GreaterThanValue O primeiro valor é maior que o segundo CompareDateTime(const A, B: TD...

PROGRAMERO

Pesquisar este blog