DOM real/navegador:
DOM significa 'Modelo de objeto de documento'. É uma representação estruturada de HTML na página web ou aplicativo. Ele representa toda a IU (Interface de usuário) do aplicativo da web como estrutura de dados em árvore.
É um representação estrutural de elementos HTML de um aplicativo da web em palavras simples.
Sempre que houver alguma alteração no estado da IU do aplicativo, DOM é atualizado e representa a mudança. O DOM é renderizado e manipulado a cada alteração para atualização da interface do usuário da aplicação, o que afeta o desempenho e o retarda.
Portanto, com muitos componentes de UI e a estrutura complexa de DOM, Ele será atualizado mais caro, pois precisa ser renderizado novamente a cada alteração.
O DOM é constituído como uma estrutura de dados em árvore. Consiste no nó para cada Elemento da IU presente no documento da web.
convenção de nomenclatura para java
Atualizando o DOM:
Se soubermos um pouco sobre JavaScript, você poderá ver pessoas usando o 'getElementById()' ou 'getElementByClass()' método para modificar o conteúdo do DOM.
Sempre que ocorre alguma alteração no estado do seu aplicativo, o DOM é atualizado para refletir a alteração na UI.
Como o Virtual DOM acelera as coisas:
Quando alguma coisa nova é adicionada ao aplicativo, o DOM virtual é criado, representado como uma árvore. Cada elemento do aplicativo é um nó na árvore.
Portanto, sempre que há alteração na posição de um elemento, um novo DOM virtual é criado. A árvore DOM virtual mais recente é comparada com a mais recente, onde as alterações são anotadas.
Ele encontra a maneira possível de fazer essas alterações pelo DOM real. Em seguida, os elementos atualizados seriam renderizados novamente na página.
Como o Virtual DOM ajuda na reação:
Tudo no React é observado como um componente, um componente funcional e um componente de classe. Um componente possui um estado. Sempre que alteramos algo no arquivo JSX, para simplificar, sempre que o estado do componente é alterado, o react atualiza sua árvore DOM virtual.
O React mantém dois DOMs virtuais sempre. O primeiro contém o DOM virtual atualizado e o outro é uma versão pré-atualizada do DOM virtual atualizado. Ele compara a versão pré-atualizada do DOM virtual atualizado e descobre o que foi alterado no DOM, como quais componentes serão alterados.
Embora possa parecer ineficaz, o custo não é maior, pois a atualização do DOM virtual não pode demorar muito.
Ao comparar a árvore DOM virtual atual com a anterior é conhecida como 'desafiando'. Depois que o React souber o que mudou, ele atualizará os objetos no DOM real. React usa atualizações em lote para atualizar o DOM real. As alterações no DOM real são enviadas em lotes, em vez de enviar quaisquer atualizações para a única alteração no estado do componente.
Rerenderizar a UI é a parte mais cara, e o React consegue fazer isso de maneira mais eficiente, garantindo que o DOM Real que recebe as atualizações em lote para renderizar novamente a UI. O processo de conversão das alterações para o DOM real é chamado reconciliação.
Ele melhora o desempenho e é o principal motivo pelo qual os desenvolvedores adoram o React e seu Virtual DOM.
O que é o DOM Virtual do React?
O conceito de Virtual DOM vem para tornar o desempenho do Real DOM melhor e mais rápido. Virtual DOM é um símbolo virtual do DOM.
Mas a principal diferença é que toda vez, a cada alteração, o DOM virtual é atualizado em vez do DOM real.
Por exemplo, o real e DOM virtual é representado como um estrutura de árvore. Cada elemento da árvore é um nó. A nó é adicionado à árvore quando um novo item é adicionado à UI do aplicativo.
Se a posição de qualquer elemento mudar, um novo a árvore DOM virtual é criada. O DOM virtual calcula o número mínimo de operações no DOM real para fazer alterações no DOM real. É eficiente e tem melhor desempenho, reduzindo o custo e a operação de nova renderização de todo o DOM real.
Agora temos uma compreensão normal do DOM Real e Virtual.
Vejamos como Reagir funciona usando DOM virtual.
- Cada UI é um indivíduo componente, e cada componente tem seu estado.
- A reação segue padrões observáveis e observa as mudanças nos estados.
- Sempre que qualquer alteração for feita no estado do componente, React atualiza a árvore DOM virtual mas não altera o árvore DOM real.
- Reagir compara o Versão Atual do DOM virtual com o versão anterior depois atualizando.
- O React sabe quais objetos são alterados no DOM virtual. Ele substitui os objetos no DOM real , levando a manipulação mínima operações.
- Este processo é conhecido como 'diferenciação'. Esta imagem deixará o conceito claro.
Na imagem, o azul escuro círculos são as nós que foram alterados. O estado desses componentes mudou. React calcula a diferença entre a versão anterior e a atual do árvore DOM virtual, e toda a subárvore pai é renderizada novamente para mostrar a IU que foi alterada.
A árvore atualizada é lote atualizado (que as atualizações para o DOM real são enviadas em lotes em vez de enviar atualizações para cada mudança de estado.) para o DOM real.
Para nos aprofundarmos nisso, precisamos saber sobre o Renderização de reação () função.
Então, precisamos saber sobre alguns dos importantes características de Reagir.
JSX
JSX apoia JavascriptXML. É um extensão de sintaxe de JS. Usando JSX, podemos escrever Estruturas HTML no arquivo que contém Código JavaScript.
Componentes
Os componentes são independente e reutilizável de código. Cada interface de usuário no aplicativo React é um componente. Um único aplicativo tem muitos componentes.
Os componentes são de dois tipos, componentes de classe e componentes funcionais.
Os componentes da classe têm estado porque usam seu 'estado' para alterar a interface do usuário. Componentes funcionais são componentes sem estado. Eles agem como uma função JavaScript que usa um parâmetro arbitrário chamado 'props'.
Ganchos de reação foram introduzidos para acessar estados com componentes funcionais.
Métodos de ciclo de vida
Métodos de ciclo de vida são métodos importantes construídas em para reagir, que operam nos componentes durante sua duração no DOM. Cada componente do React passou por um ciclo de vida de eventos.
O método render() é o máximo usado método de ciclo de vida .
É o único método dentro Componentes da classe React . Portanto, em cada classe, o componente render() é chamado.
O método render() lida com a renderização do componente pela UI. O render() contém toda a lógica exibida na tela. Também pode ter um nulo valor se não quisermos mostrar nada em exibição.
O exemplo é mostrado abaixo:
class Header extends React.Component{ render(){ return React Introduction } } O exemplo mostrará o JSX escrito em render().
converter de string para inteiro java
Quando um estado ou suporte é atualizado dentro do componente, renderizar() retornará uma árvore diferente de elementos React.
Ao escrever o código no console ou no arquivo JavaScript, acontecerá o seguinte:
- O navegador analisa o HTML para encontrar o nó com o ID.
- Remove o elemento filho do elemento.
- Ele atualiza o elemento (DOM) com o 'valor atualizado'.
- Ele recalcula CSS para nós pai e filho.
- Em seguida, atualize o layout.
Finalmente, atravesse a árvore na tela.
Então, como sabemos que a atualização do DOM envolve alterar o conteúdo. Está mais apegado a isso.
Algoritmos complexos estão envolvidos no recálculo do CSS e na alteração dos layouts, o que afeta o desempenho.
Portanto, o React tem muitas maneiras de lidar com isso, pois utiliza algo conhecido como DOM virtual.
cúpula de reação
O pacote react-dom fornece métodos específicos do DOM no nível superior do aplicativo para escapar da rota do modelo React, se necessário.
import * as ReactDOM from 'react-dom';
Se você usa ES5 com npm, você também deve escrever:
var ReactDOM = require('react-dom');
O reação O pacote também fornece módulos específicos para aplicativos cliente e servidor:
- react-dom/cliente
- react-dom/servidor
O pacote react-dom exporta estes métodos:
- criarPortal()
- flushSync()
Os métodos react-dom também são exportados:
- renderizar ()
- hidratar ()
- encontrarDOMNode()
- desmontarComponentAtNode()
Nota: Hidratar e renderizar foram substituídos por métodos de cliente mais recentes.
Suporte ao navegador
O React oferece suporte a todos os navegadores modernos e alguns polyfills são necessários para versões mais antigas.
Nota: Não podemos oferecer suporte a navegadores mais antigos que não suportam métodos ES5, como o Internet Explorer. Você pode descobrir que os aplicativos funcionam nos navegadores mais recentes se houver polyfills como es5-shim e es5-sham incluídos na página, mas você estará por conta própria se seguir o caminho.
Referência
criarPortal()
Cria Portal () Portal fornece a maneira de ler filhos no nó DOM, que existe fora da classificação do componente DOM.
flushSync()
Forçar atualizações do React no retorno de chamada fornecido simultaneamente. Isso garante que o DOM seja atualizado imediatamente.
// Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. Observação:
- Use com moderação. Flush Sync prejudica significativamente o desempenho.
- FlushSync forçará os limites pendentes a mostrar o estado de fallback.
- Ele executa efeitos pendentes e aplica simultaneamente as atualizações antes de devolvê-las.
- flushSync libera atualizações fora do retorno de chamada para liberar as atualizações do retorno de chamada. Por exemplo, se houver alguma atualização pendente de um clique, o React poderá liberá-la antes de liberar as atualizações no retorno de chamada.
Referência legada
renderizar()
render(element, container[, callback])
Nota: Renderizar é substituído pela criação de Root no React. Renderize um elemento React no DOM no contêiner fornecido e forneça uma referência ao componente.
Se um elemento React fosse renderizado anteriormente em qualquer contêiner, ele realizaria uma atualização e seria necessário refletir o elemento React mais recente.
Ele é executado quando o componente é renderizado se o retorno de chamada opcional for fornecido.
Observação:
O método Render () controla o conteúdo do nó do contêiner quando ele passa. Qualquer elemento DOM existente é substituído.
Render() não altera o nó do contêiner (só pode modificar os filhos do contêiner). Pode ser possível inserir um componente em um nó DOM existente sem substituir os elementos filhos.
Render () atualmente faz referência à instância raiz do ReactComponent.
Porém, seu valor de retorno é herdado e pode ser evitado, pois, em alguns casos, versões futuras do React poderão gerar componentes de forma assíncrona.
Se você precisar de uma referência ao protótipo ReactComponent, a melhor solução é anexar uma referência de recall ao elemento.
Render() é usado para hidratar um contêiner renderizado para que o servidor fique obsoleto. Usar hidratarRoot() no lugar dele.
instância java de
hidrato()
hidrato é substituído pela raiz hidratada.
É exatamente como render() mas é usado para um contêiner cujo conteúdo HTML é renderizado pelo ReactDOMServer. O React tentará conectar ouvintes de eventos à marcação atual.
hydrate(element, container[, callback])
Observação:
O React espera que o conteúdo renderizado seja idêntico entre o servidor e o cliente. Podemos corrigir o conteúdo do texto, mas devemos tratar as inconsistências como erros e corrigi-las. No modo de desenvolvimento, o React alerta sobre a inconsistência durante a hidratação.
Não há garantia de que diferenças específicas sejam corrigidas em caso de discrepâncias.
É importante por motivos de desempenho na maioria das aplicações e será muito caro validar todos os sinalizadores.
Suponha que o atributo de um elemento ou o conteúdo do texto difere inevitavelmente entre o servidor e o cliente (por exemplo, o carimbo de data/hora ). Neste caso, podemos silenciar o alerta adicionando suprimirHydrationWarning = {true} ao elemento.
Se não for um elemento de texto, ele não poderá tentar corrigi-lo para que permaneça inconsistente até atualizações futuras.
Você pode executar uma renderização em duas passagens se precisarmos fornecer algo diferente no servidor e no cliente deliberadamente. Os componentes deixados no cliente podem ler variáveis de estado como this.state.isClient, onde será definido como verdadeiro em componenteDidMount().
A passagem de renderização inicial fará o mesmo que o servidor, evitando inconsistências, mas a passagem adicional será feita de forma síncrona após a hidratação.
Nota: Esta abordagem tornará os componentes mais lentos, pois fazem isso duas vezes, portanto, use-a com cuidado.
unmountComponentAtNode() unmountComponentAtNode(container)
Observação:
desmontarComponentAtNode foi substituído por root.desmontar() em Reagir. Ele apaga o componente React montado do DOM e limpa seus manipuladores de eventos e estado.
Se nenhum componente foi montado no contêiner, ele não poderá fazer nada. Retorna verdadeiro se nenhum componente estiver montado e falso se não houver nenhum componente para desmontar.
encontrarDOMNode()
Nota: findDOMNode é uma saída de escape usada para acessar o nó DOM subjacente. Essa saída de emergência é desencorajada na maioria dos casos porque perfura a abstração do componente. Ele foi descontinuado no StrictMode.
encontrarDOMNode(componente)
Se este componente tiver sido montado no DOM, isso retornará o elemento DOM do navegador nativo correspondente. Este método é útil para ler valores do DOM, como valores de campos de formulário, e realizar medições de DOM. Na maioria dos casos, você pode anexar uma referência ao nó DOM e evitar usar findDOMNode.
Quando um componente retorna nulo ou falso, findDOMNode retorna nulo. Quando um componente é renderizado em uma string, findDOMNode retorna um nó DOM de texto contendo esse valor. O componente pode retornar um fragmento com vários filhos caso findDOMNode tenha retornado o nó DOM correspondente ao primeiro filho não vazio.
Observação:
findDOMNode funciona apenas em componentes montados (ou seja, componentes que foram colocados no DOM). Se você tentar chamar isso em um componente que ainda não foi montado (como chamar findDOMNode() em render() em um componente que ainda não foi criado), uma exceção será lançada.
findDOMNode não pode ser usado em componentes de função.
Elementos DOM
React implementa um sistema DOM independente de navegador para desempenho e compatibilidade entre navegadores. Aproveitamos esta oportunidade para limpar algumas arestas na implementação do DOM do navegador.
No React, todas as propriedades e atributos do DOM (incluindo manipuladores de eventos) devem ser camelcase. Por exemplo, o atributo tabindex HTML corresponde ao atributo tab Index no React.
As exceções são os atributos aria-* e data-*, que devem estar em letras minúsculas. Por exemplo, você pode ter uma tag de área como tag de área.
Diferenças em atributos
Vários atributos funcionarão de maneira diferente entre React e HTML:
primeiro portátil
verificado
O atributo verificado é suportado por componentes de uma caixa de seleção ou rádio do tipo . É útil para fabricar componentes controlados. Você pode usar isso para determinar se o componente está verificado ou não.
DefaultChecked é a contraparte não verificada que determina que o componente é verificado na primeira vez que é montado.
nome da classe
Para especificar a classe CSS, use o atributo className. Aplica-se a todos os elementos DOM e SVG regulares, como, , etc.
Se você usar React com Web Components (incomum), use o atributo class.
perigosamenteSetInnerHTML
Dangerously SetInnerHTML é o substituto do React para o uso de innerHTML no navegador DOM. Configurar o código HTML é arriscado porque é fácil expor os usuários a um ataque de cross-site scripting (XSS).
Portanto, podemos definir o HTML diretamente do React, mas você precisa digitar SetInnerHTML perigosamente e passar um objeto com a chave __html para lembrar que é perigoso.
Por exemplo:
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor Os elementos React usam htmlFor em vez disso, já que for é uma palavra reservada em JavaScript.
em mudança
O evento onChange se comporta conforme esperado; o evento é acionado sempre que um campo do formulário é alterado.
Intencionalmente não usamos o comportamento existente do navegador porque a mudança é grande para seu comportamento e o React depende do evento para lidar com a entrada do usuário em tempo real.
selecionado
Se você quiser marcar como selecionado, consulte o valor dessa opção no valor de. Consulte 'Selecionar tag' para obter instruções detalhadas.
Observação:
No máximo dos casos, os nomes das classes referem-se a classes definidas em uma folha de estilos CSS externa. Os estilos são usados em aplicativos React para adicionar estilos calculados no momento da renderização. O atributo style aceita o objeto JavaScript com propriedades camel em vez de uma string CSS.
Está em conformidade Estilo DOM propriedades JavaScript, é mais eficiente e evita XSS falhas de segurança.
Por exemplo:
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } Observe que: os estilos não são prefixados automaticamente. Para oferecer suporte a navegadores mais antigos, precisamos fornecer propriedades de estilo:
const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } As chaves de estilo são camel para corresponder ao acesso às propriedades nos nós DOM de dentro do JS. Os prefixos do provedor MS começam com uma letra maiúscula.
O React adicionará automaticamente um sufixo 'px' a algumas propriedades de estilo de número embutido. Se quisermos usar unidades diferentes de 'px', especifique o valor como uma string com a unidade desejada.
por exemplo:
// Result style: '10px' Hello World! // Result style: '10%' Hello World!
No entanto, nem todas as propriedades de estilo são convertidas em sequências de pixels.
Suprimir alerta de conteúdo editável
Há um aviso caso um elemento para filhos esteja marcado como conteúdo editável, pois não funcionará. O atributo suprime o aviso.
Aviso de supressão
Se usarmos a renderização React do lado do servidor, será um aviso quando o servidor e o cliente forem renderizados com conteúdo diferente. No entanto, é difícil garantir uma correspondência exata em casos raros. Por exemplo, espera-se que os carimbos de data/hora sejam diferentes no servidor ou no cliente.
Se você definir o aviso de supressão como verdadeiro, ele não avisará sobre incompatibilidades entre atributos e conteúdo do elemento.
Funcionava apenas em um nível de profundidade e era para ser usado como fuga.
valor
O atributo value é projetado pelos componentes e. Você pode usá-lo para definir o valor do componente.
É útil para fabricar componentes controlados. defaultValue e igual a desmarcado definem o valor do componente quando montado serialmente.
Todos os atributos HTML suportados
Qualquer atributo DOM personalizado e padrão é suportado.
React forneceu uma API centrada em JavaScript no DOM. E os componentes do React geralmente contêm adereços personalizados e relacionados ao DOM, e então o React usa as mesmas convenções CamelCase da API DOM:
// Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API