O funcionário Reagir docs afirmam que " React.PureComponenté shouldComponentUpdate()única superficialmente compara os objetos", e aconselha contra esta se o estado é 'profunda'.

Diante disso, existe alguma razão pela qual se deve preferir React.PureComponentao criar componentes React?

Perguntas :

• existe algum impacto no desempenho React.Componentque possamos considerar React.PureComponent?
• Eu estou supondo que shouldComponentUpdate()de PureComponentrealiza apenas comparações superficiais. Se for esse o caso, esse método não pode ser usado para comparações mais profundas?
• "Além disso, React.PureComponent's shouldComponentUpdate()salta sustentar atualizações para toda a sub componente" - isso significa que mudanças prop são ignorados?

Surgiu uma questão de ler neste blog médio , se ajudar.

A principal diferença entre React.PureComponente React.Componenté PureComponentfaz uma comparação superficial na mudança de estado. Isso significa que, ao comparar valores escalares, ele compara seus valores, mas, ao comparar objetos, compara apenas referências. Isso ajuda a melhorar o desempenho do aplicativo.

Você deve procurar React.PureComponentquando puder satisfazer qualquer uma das condições abaixo.

• Estado / adereços deve ser um objeto imutável
• Estado / adereços não devem ter uma hierarquia
• Você deve ligar forceUpdatequando os dados forem alterados

Se você estiver usando React.PureComponent, verifique se todos os componentes filhos também são puros.

existe algum impacto no desempenho ao usar o React.component que possamos considerar usar React.PureComponent?

Sim, isso aumentará o desempenho do seu aplicativo (devido a uma comparação superficial)

Eu estou supondo que shouldComponentUpdate () de Purecomponent executa apenas comparações superficiais. Se for esse o caso, o referido método não pode ser usado para comparações mais profundas?

Você adivinhou corretamente. Você pode usá-lo se atender a qualquer uma das condições mencionadas acima.

"Além disso, shouldComponentUpdate () de React.PureComponent ignora as atualizações de prop para toda a subárvore do componente" - Isso significa que as alterações de prop são ignoradas?

Sim, as alterações de suporte serão ignoradas Se não for possível encontrar diferença na comparação superficial.

Componente PureComponenttem uma diferença

PureComponenté exatamente o mesmo que, Componentexceto que ele lida com o shouldComponentUpdatemétodo para você.

Quando os adereços ou o estado mudarem, PureComponentfará uma comparação superficial entre os adereços e o estado. Componentpor outro lado, não comparará os adereços atuais e o estado com o próximo fora da caixa. Assim, o componente será renderizado novamente por padrão sempre que shouldComponentUpdatefor chamado.

Comparação superficial

Ao comparar adereços anteriores e estado para o próximo, uma comparação superficial verificará se as primitivas têm o mesmo valor (por exemplo, 1 é igual a 1 ou se verdadeiro é verdadeiro) e se as referências são as mesmas entre valores javascript mais complexos, como objetos e matrizes.

Fonte: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

A principal diferença, a meu ver, é que um componente é renderizado novamente toda vez que seu pai é renderizado novamente, independentemente de os props e o estado do componente terem sido alterados.

Um componente puro, por outro lado, não será renderizado novamente se seus pais forem renderizados novamente, a menos que os props (ou estado) do componente puro tenham sido alterados.

Por exemplo, digamos que temos uma árvore de componentes com uma hierarquia de três níveis: pai, filhos e netos.

Quando os adereços dos pais são alterados de uma maneira que os adereços de apenas um filho são alterados, então:

• se todos os componentes forem componentes regulares, toda a árvore de componentes será renderizada novamente
• se todos os filhos e netos são componentes puros, apenas um filho será renderizado novamente, e um ou todos os seus netos, dependendo se seus objetos foram alterados. Se houver muitos componentes nessa árvore de componentes, isso pode significar um aumento significativo no desempenho.

Às vezes, no entanto, o uso de componentes puros não terá nenhum impacto. Tive um caso desse tipo em que os pais receberam seus acessórios de uma loja redux e precisaram realizar um cálculo complexo dos acessórios de seus filhos. O pai usou uma lista plana para renderizar seus filhos.

O resultado foi que sempre que houve uma pequena alteração no repositório redux, toda a matriz plana dos dados das crianças foi recalculada. Isso significava que, para cada componente da árvore, os objetos eram novos objetos, mesmo que os valores não mudassem.

Nesse caso, os componentes puros não ajudam, e o aumento de desempenho pode ser alcançado apenas usando componentes regulares e verificando os filhos, em shouldComponentUpdate, se for necessário um novo renderizador.