React: Função de desempenho de reconciliação vs. componentes de classe
Você quer solicitar um recurso ou relatar um bug ?
nenhum / bug
Qual é o comportamento atual?
Ao migrar componentes de classe para componentes de função (com ganchos), notei uma queda significativa de desempenho . Eu tenho um componente (chamado TreeNodeComponent ) que faz parte de uma estrutura de árvore. Dependendo do tamanho da árvore, centenas de instâncias podem ser visíveis.
O empacotamento do componente de função em um PureComponent reduziu significativamente o "tempo de renderização" observado. (De ~ 160ms a ~ 60ms)
"Render time", observado no Chrome Dev Tools
Contexto:
O aplicativo renderiza centenas desses TreeNodeComponent em um tree-structure . Quando um pai é atualizado, todos os filhos diretos precisam ser reconciliados.
Projeto: https://github.com/thomasnordquist/MQTT-Explorer
Qual é o comportamento esperado?
Desempenho comparável entre componentes funcionais e de classe.
Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?
OSX
Chromium 73 / Electron 5.0.5
Reagir 16,8
Texto datilografado e pacote da Web
thomasnordquist
Todos 3 comentários
O empacotamento do componente de função em um PureComponent reduziu significativamente o "tempo de renderização" observado. (De ~ 160ms a ~ 60ms)
Isso é esperado se renderizar TreeNodeComponent for caro. React.PureComponent sai mais cedo se os adereços não mudaram.
Ao migrar componentes de classe para componentes de função (com ganchos), notei uma queda significativa de desempenho.
Você está dizendo que passar de uma classe estendendo React.Component para um componente de função causou uma regressão de desempenho? Ou você já estava usando React.PureComponent (ou shouldComponentUpdate )
Você pode usar React.memo para obter a mesma semântica de resgate com componentes de função.
aweary
em 11 jul. 2019
Eu migrei de um React.Component com shouldComponentUpdate .
Eu uso React.useMemo para evitar "renderização".
React.memo produz resultados tão bons quanto os de PureComponent . (~ 50-60ms)
Muito obrigado por esclarecer.
thomasnordquist
em 11 jul. 2019
Não entendi o que tem um desempenho melhor: componentes funcionais ou componentes de classe. O que devo usar para listas longas
TheMisir
em 27 nov. 2019
Questões relacionadas
tleunen
·
3Comentários
jmullo
·
3Comentários
jvorcak
·
3Comentários
MoOx
·
3Comentários
huxiaoqi567
·
3Comentários
Comentários muito úteis
Isso é esperado se renderizar
TreeNodeComponentfor caro.React.PureComponentsai mais cedo se os adereços não mudaram.Você está dizendo que passar de uma classe estendendo
React.Componentpara um componente de função causou uma regressão de desempenho? Ou você já estava usandoReact.PureComponent(oushouldComponentUpdate)Você pode usar
React.memopara obter a mesma semântica de resgate com componentes de função.