Eu sou o autor principal de um módulo de dom virtual , então talvez eu possa responder às suas perguntas. De fato, existem 2 problemas que precisam ser resolvidos aqui
- Quando eu re-renderizo? Resposta: Quando observo que os dados estão sujos.
- Como renderizo de forma eficiente? Resposta: Usando um DOM virtual para gerar um patch DOM real
No React, cada um de seus componentes possui um estado. Esse estado é como um observável que você pode encontrar em knockout ou em outras bibliotecas de estilo MVVM. Essencialmente, o React sabe quando renderizar novamente a cena porque é capaz de observar quando esses dados são alterados. A verificação suja é mais lenta que as observáveis, porque você deve pesquisar os dados em um intervalo regular e verificar todos os valores na estrutura de dados recursivamente. Em comparação, a definição de um valor no estado sinalizará a um ouvinte que algum estado foi alterado, portanto o React pode simplesmente ouvir eventos de alteração no estado e enfileirar a nova renderização.
O DOM virtual é usado para re-renderização eficiente do DOM. Isso não está realmente relacionado à verificação suja de seus dados. Você pode renderizar novamente usando um DOM virtual com ou sem verificação suja. Você está certo quanto ao fato de haver alguma sobrecarga na computação da diferença entre duas árvores virtuais, mas a diferença virtual do DOM é sobre o que precisa ser atualizado no DOM e não se seus dados foram ou não alterados. De fato, o algoritmo diff é um verificador sujo, mas é usado para verificar se o DOM está sujo.
Nosso objetivo é renderizar novamente a árvore virtual somente quando o estado mudar. Portanto, usar um observável para verificar se o estado mudou é uma maneira eficiente de evitar renderizações desnecessárias, o que causaria muitas diferenças de árvore desnecessárias. Se nada mudou, não fazemos nada.
Um DOM virtual é bom porque nos permite escrever nosso código como se estivéssemos re-renderizando a cena inteira. Nos bastidores, queremos calcular uma operação de patch que atualiza o DOM para ter a aparência esperada. Portanto, embora o algoritmo diff / patch virtual do DOM provavelmente não seja a solução ideal , ele nos fornece uma maneira muito agradável de expressar nossos aplicativos. Apenas declaramos exatamente o que queremos e o React / virtual-dom descobrirá como tornar sua cena assim. Não precisamos manipular manualmente o DOM ou ficar confusos sobre o estado anterior do DOM. Também não precisamos renderizar novamente toda a cena, o que poderia ser muito menos eficiente do que corrigi-la.