Debaixo do capô: Entendendo a performance no React

Pessoal, muito se fala sobre a alta performance de renderização de aplicações desenvolvidas utilizando React. Um dos motivos que mais são Importantes quando se toca neste ponto é oReact Conciliation .

Esta API는 React é responsável por observar e gerenciar o que muda a cada ciclo de re-renderização da sua aplicação/componentes. Nesse 프로세스 o React utiliza um algoritmo chamado React’s “diffing” algorithm , que é responsável por entender melhor o que muda a cada renderização e alterar o DOM da forma mais performática possível.

Existem algumas ações simples que o algoritmo faz para entender essas diferenças entre as versões de renderizações, que nós podemos observar para trabalhar com mais performance.

Elementos de diferentes tipos

Quando o React compara as versões, ele observa o tipo de elemento que está renderizando aquela árvore de componentes. 모든 요소가 변경되면 다시 렌더링해야 합니다. 예를 들어 abaixo:

Neste cenário, eu vou alterar um elemento que era do tipodiv 및 mudou para o tipospan .

<!-- Versão anterior do componente -->
<div>
  <ListaDeUsuarios />
</div>

<!-- Nova versão do componente -->
<span>
  <ListaDeUsuarios />
</span>

Neste caso acima, todo esse componente será re-renderizado.

Elementos de mesmo tipo

Quando o elemento mantem seu tipo entre as versões o react analisa outras características para decidir o que vai ser re-renderizado.

Neste caso abaixo, o componente mantêm o tipo div entre as versões, porém o conteúdo da prop title é alterado. Neste caso, o React vai renderizar apenas esta alteração 개별 da prop.

<!-- Versão anterior do componente -->
<div className="header" title="Meu App" />

<!-- Nova versão do componente -->
<div className="header" title="Meu App - Usuários" />

Um outro exemplo é a tag style, que é tratada de forma de special. Nesse caso abaixo, apenas a propriedade color do CSS do elemento em questão é alterada, então React vai entender que apenas essa propriedade deve ser re-renderizada, ao mesmo tempo que o textAlign 계속 imutável.

<!-- Versão anterior do componente -->
<div style={{color: 'red', textAlign: 'left'}} />

<!-- Nova versão do componente -->
<div style={{color: 'green', textAlign: 'left'}} />

원소 목록

Ao renderizar uma lista de elementos, você pode utilizar uma propriedade chamada key para que instruí-lo a re-renderizar os elementos da lista que mudaram as keys .

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
  <li key="third">third</li>
</ul>

변경된 요소의 순서를 정하고 다시 렌더링할 수 있는 요소가 없습니다.

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="second">second</li>
  <li key="first">first</li>
</ul>

이 기술은 React가 더 나은 구성 요소를 다시 렌더링하고 성능을 평가할 때 더 나은 렌더링을 제공하기 위한 코드를 작성하는 데 도움이 됩니다.



Este post foi baseado na documentação do React Conciliation, usando os mesmos example a presentados na DOC.


Este post não seria possível sem o trabalho de pesquisa e talkão do time do time do capítulo de frontend do LuizaLabs.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

아테 마이스.