Os usos do react virtual dom: 1. Melhorar o desempenho do código react Virtual DOM é um objeto js. Criar um objeto js consome muito menos desempenho do que criar um DOM real. DOM terá um enorme impacto na melhoria do desempenho 2. Para obter aplicativos de terminal cruzado, o DOM virtual é convertido em nós DOM de navegador individuais ou pode ser convertido em componentes de aplicativos nativos para implementar o terminal cruzado. aplicações.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
1. Desempenho bastante melhorado
2. Permite aplicações cross-end (React Native). No lado do navegador, o DOM virtual é convertido em nós DOM do navegador individuais. Ele também pode ser convertido em componentes de aplicativos nativos e aplicativos de segmento cruzado podem ser realizados.
Por que melhora o desempenho
Se não houver DOM virtual, um DOM real será criado diretamente. Cada vez que os dados forem alterados, um DOM real será criado e, em seguida, o DOM real será comparado e, em seguida, o DOM real será modificado. O DOM consumirá muito desempenho (como a árvore DOM gerada pelo JS chamará a API de nível de aplicativo da web, a perda de desempenho desse nível de API é muito grande), o que consumirá muito desempenho.
É diferente com o DOM virtual. O DOM virtual é um objeto js. Criar um objeto js consome muito menos desempenho do que criar um DOM real.
DOM virtual
Virtual DOM é um objeto js
<div id='abc'><span>olá mundo</span></div>//DOM real['div', {id: 'abc'}, ['span', {}, 'olá mundo' ]]//DOM virtualProcesso de carregamento e atualização da página
1. dados do estado
Modelo 2.jsx
3. Dados + modelo geram DOM virtual
4. Use DOM virtual para gerar DOM real
5. mudanças de estado
6. Dados + modelo geram novo DOM virtual
7. Compare o DOM virtual original e o novo DOM virtual (algoritmo diff)
8. Opere diretamente o DOM e mude de lugar
Amplie seu conhecimento:
Qual é o propósito do DOM virtual?
Para conseguir uma atualização eficiente dos elementos DOM na página;
Em aplicativos da web tradicionais, frequentemente atualizamos as alterações de dados na interface do usuário em tempo real, portanto, cada pequena alteração nos dados fará com que a árvore DOM seja renderizada novamente.
O objetivo do DOM virtual é acumular todas as operações, calcular estatisticamente todas as alterações e atualizar o DOM de maneira uniforme.
Desempenho bastante melhorado
Ele permite aplicativos cross-end (React Native). No lado do navegador, o DOM virtual é convertido em nós DOM do navegador individuais. Ele também pode ser convertido em componentes de aplicativos nativos e aplicativos de segmento cruzado podem ser realizados.
A diferença entre DOM e DOM virtual
1. O DOM virtual não realizará operações de composição e redesenho.
2. Modifique frequentemente o DOM virtual, depois compare e modifique as partes que precisam ser alteradas no DOM real de uma vez (nota!) E, finalmente, execute a composição e o redesenho no DOM real para reduzir a perda de composição e redesenho de excesso Nós DOM.
3. A eficiência da composição tipográfica e redesenho frequentes do DOM real é bastante baixa.
4. O DOM virtual reduz efetivamente o redesenho e a composição de grandes áreas (nós DOM reais), porque no final é diferente do DOM real e só pode renderizar parte dele.