Abordagem 1: Renderizando tudo outra vez

Vamos analisar a primeira abordagem. Se vamos renderizar os elementos novamente, o browser vai ter de destruir e criar outros elementos do DOM. Essa abordagem claramente não é a melhor e podemos apontar algumas razões para isso:

1. Lentidão quando envolvem muitos elementos. (Obs: cada ms importa em uma aplicação web).
2. Event handlers serão perdidos.
3. Foco também será perdido.

Bem, não temos nenhum Event handler ou foco em algum elemento no exemplo que estamos analisando, mas imagine que tenhamos adicionado Event handlers no click de cada item. Essa funcionalidade iria para o espaço quando recriássemos nosso DOM.

Vamos ver isso na prática. Veja o código abaixo feito em javascript.

source code

Analise por um minuto esse código e tente entender o que acontece.

Basicamente o que faço é criar inicialmente 2 botões, um que chama um evento e o outro que recria o DOM com os mesmo elementos. Se clicar inicialmente no primeiro botão, vai perceber que um alert aparece na tela. Isso significa que o nosso Event handler está funcionando. Ao clicar no segundo botão, DOM é recriado com os mesmos botões. Clicando novamente no botão que emite o alerta, iremos perceber que o mesmo não é disparado.

Esse exemplo mostra claramente um problema sério de recriar o DOM quando os dados mudam.