Ignorância do básico do React que pode estar arruinando você

Deseja ter uma boa idéia do que acontece com os componentes quando você trabalha com o React? Leia a tradução do artigo de Ohans Emmanuel publicado no freeCodeCamp sob o corte .



Muitas vezes, é impossível eliminar um determinado erro, porque você não conhece alguns princípios básicos. Pelo mesmo motivo, pode ser difícil dominar técnicas mais avançadas.

Neste artigo, tentarei falar sobre alguns dos princípios do React, que, na minha opinião, você precisa entender.

Não analisaremos esses princípios do ponto de vista técnico. Existem muitos outros artigos que discutem conceitos como propriedades do componente ( props ), estado ( state ), contexto ( context ), alteração do estado de um componente ( setState ) e outros.

Quero falar sobre o que está subjacente à maioria das operações técnicas que você executará com o React.

Você está pronta?

Processos de reação ocultos

A primeira coisa que todos aprendem no React é como criar componentes. Tenho certeza de que você também aprendeu isso.

Por exemplo:

 // functional component function MyComponent() { return <div> My Functional Component </div> } // class based component class MyComponent extends React.Component { render() { return <div> My Class Component </div> } } 

A maioria dos componentes que você prescreve retorna alguns elementos para você.

 function MyComponent() { return <span> My Functional Component </span> //span element } class MyComponent extends React.Component { render() { return <div> My Class Component </div> //div element } } 

Por dentro, esse processo é assim: a maioria dos componentes retorna uma árvore de elementos.

Após uma avaliação interna, os componentes geralmente retornam uma árvore de itens

Além disso, você provavelmente se lembra que os componentes funcionam como funções que retornam valores com base em seus props e valores de state .

Componentes são algo como funções com adereços e parâmetros de estado

Portanto, sempre que os valores das propriedades ( props ) e o estado do componente são alterados, uma nova árvore de elementos é criada.

Se os props ou valores de estado mudarem, a árvore de elementos será redesenhada. Como resultado, uma nova árvore de elementos aparece.

Se o componente for baseado na herança de classe, a árvore de funções retornará uma árvore de elementos

 <code>render</code>. <source lang="javascript">class MyComponent extends React.Component { render() { //this function is invoked to return the tree of elements } } 

Se o componente estiver funcional, seu valor de retorno fornecerá uma árvore de elementos.

 function MyComponent() { // the return value yields the tree of elements return <div> </div> } 

Por que isso é importante?

Considere o componente <MyComponent /> que aceita prop , como mostrado abaixo.

 <MyComponent name='Ohans'/> 

A renderização desse componente retorna uma árvore de elementos.


A árvore de itens retornou após redesenhar <MyComponent />

O que acontece quando o valor do name muda?

 <MyComponent name='Quincy'/> 

Bem, a nova árvore de elementos está de volta!


NOVA árvore de itens retornada após redesenhar <MyComponent /> com outros objetos

Bom
O React agora possui duas árvores diferentes - a árvore anterior e a atual.
Neste ponto, o React compara as duas árvores para encontrar as alterações.


Duas árvores diferentes. O que exatamente mudou?

A árvore não mudou completamente, mas apenas parcialmente atualizada (isso acontece na maioria dos casos).

Após a comparação, o React atualiza o DOM real para refletir as alterações na nova árvore de elementos.

É simples, não é?

Comparar duas árvores para mudanças é chamado de "reconciliação". Você e eu fomos capazes de analisar esse processo, apesar de ser bastante complicado .

O React apenas atualiza o essencial, certo?

Antes de começar a trabalhar com o React, você costuma ouvir como é legal, incluindo o fato de que ele faz apenas alterações importantes no modelo DOM atualizado.


No React Docs : inspetor DOM mostrando detalhes da atualização

Isso é tudo?

Só isso.

No entanto, lembre-se: antes de prosseguir com a atualização do DOM, o React criará uma árvore de elementos para os vários componentes e fará a comparação necessária. Simplificando, ele encontrará as diferenças entre a árvore de itens anterior e a atual.

Repito isso porque os recém-chegados ao React podem não notar uma diminuição no desempenho de seus aplicativos, acreditando que o React apenas atualiza os elementos necessários no DOM.

Obviamente, isso é verdade, mas os problemas de desempenho da maioria dos aplicativos React começam antes mesmo da atualização do DOM!

Renderização desnecessária versus atualizações visuais

Mesmo que a árvore de componentes seja pequena, sua renderização leva algum tempo (pelo menos insignificante). Quanto maior a árvore dos elementos componentes, mais tempo demora a renderização.

Isso significa que redesenhar as árvores de componentes dos componentes do seu aplicativo com o React será redundante se NÃO for necessário.

Deixe-me mostrar isso com um exemplo simples.

Imagine um aplicativo com uma estrutura de componentes, como na ilustração abaixo.


Aplicativo com componente pai A e componentes filho B, C e D

O componente genérico do contêiner A obtém uma propriedade específica. No entanto, isso é feito apenas para passar essa propriedade para o componente D


O componente pai A recebe algumas propriedades e as passa para o componente filho D

Agora, quando o valor da propriedade no componente A alterado, todos os elementos filhos de A redesenhados para calcular uma nova árvore de elementos.



Quando o componente pai recebe novas propriedades, cada filho é redesenhado e uma nova árvore é retornada.

Assim, os componentes B e também são renderizados novamente, mesmo que não tenham sido alterados! Eles não receberam nenhuma nova propriedade!

Esse redesenho é renderização desnecessária.

Neste exemplo, os componentes B e C não precisam ser redesenhados, mas o React não tem conhecimento disso.

Há muitas maneiras de resolver esse problema, e eu as descrevi no meu recente artigo Como eliminar problemas de desempenho de reação .

Vá em frente. Dê uma olhada no aplicativo abaixo.


Cardie em ação :)

Eu chamei este aplicativo Carde .

Quando clico no botão para alterar a profissão do usuário, posso destacar as atualizações para o DOM, como mostrado abaixo.


Ative a exibição visual de atualizações (Paint Flashing) usando o Chrome DevTools

Agora eu posso ver o que foi atualizado no DOM.

Essa é uma maneira visual de marcar itens que precisam ser atualizados no DOM. Observe o destaque verde ao redor do texto Eu sou um bibliotecário ("Eu sou um bibliotecário".)

Tudo isso é ótimo, é claro, mas estou preocupado com a renderização inicial da árvore de elementos do React.

Eu posso dar uma olhada.


Marque React DevTools para ativar o destaque de itens atualizados.

Agora vejo quais componentes são realmente redesenhados quando clico neste botão.


Preste atenção ao destaque verde ao redor do cartão do usuário

Você vê como a maneira visual é diferente de marcar os elementos que precisam ser atualizados no DOM e as atualizações de renderização que o próprio React faz?

React redesenha o mapa do usuário inteiro e apenas o texto breve é ​​atualizado.

E isso é importante.

Conclusão

Acho que agora você tem uma idéia melhor do que e como está acontecendo com seus componentes no React.

De fato, muito mais está acontecendo do que eu acabei de lhe dizer aqui. No entanto, este é um bom começo.

Encaminhar para a criação de aplicativos legais!

Aprenda a trabalhar com o React / Redux? Nesse caso, tenho uma ótima série de livros sobre Redux. Alguns dizem que esta é a melhor literatura técnica que lêem !