React: Función de rendimiento de reconciliación frente a componentes de clase
¿Quieres solicitar una función o informar de un error ?
ninguno / error
¿Cuál es el comportamiento actual?
Al migrar componentes de clase a componentes de función (con ganchos), noté una caída significativa del rendimiento . Tengo un componente (llamado TreeNodeComponent ) que es parte de una estructura de árbol. Dependiendo del tamaño del árbol, podrían verse cientos de instancias.
Envolver el componente de función en un PureComponent redujo significativamente el "tiempo de renderizado" observado. (De ~ 160 ms a ~ 60 ms)
"Tiempo de procesamiento", observado en Chrome Dev Tools
Contexto:
La aplicación procesa cientos de estos TreeNodeComponent en un tree-structure . Cuando se actualiza un padre, todos los hijos directos deben reconciliarse.
Proyecto: https://github.com/thomasnordquist/MQTT-Explorer
¿Cuál es el comportamiento esperado?
Rendimiento comparable entre componentes funcionales y de clase.
¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?
OSX
Cromo 73 / Electrón 5.0.5
Reaccionar 16.8
Mecanografiado y Webpack
thomasnordquist
Todos 3 comentarios
Envolver el componente de función en un PureComponent redujo significativamente el "tiempo de renderizado" observado. (De ~ 160 ms a ~ 60 ms)
Eso es de esperar si renderizar TreeNodeComponent es caro. React.PureComponent retira temprano si los accesorios no han cambiado.
Al migrar componentes de clase a componentes de función (con ganchos), noté una caída significativa del rendimiento.
¿Está diciendo que pasar de una clase que extiende React.Component a un componente de función provocó una regresión del rendimiento? ¿O ya estaba usando React.PureComponent (o shouldComponentUpdate )
Puede usar React.memo para obtener la misma semántica de rescate con componentes de función.
aweary
en 11 jul. 2019
Migré de React.Component con shouldComponentUpdate .
Yo uso React.useMemo para evitar "renderizar".
React.memo produce resultados tan buenos como los de PureComponent . (~ 50-60 ms)
Muchas gracias por aclarar.
thomasnordquist
en 11 jul. 2019
No entendí cuál se está desempeñando mejor: componentes funcionales o componentes de clase. ¿Qué debo usar para listas largas?
TheMisir
en 27 nov. 2019
Temas relacionados
zpao
·
3Comentarios
jmullo
·
3Comentarios
bloodyowl
·
3Comentarios
framerate
·
3Comentarios
kocokolo
·
3Comentarios
Comentario más útil
Eso es de esperar si renderizar
TreeNodeComponentes caro.React.PureComponentretira temprano si los accesorios no han cambiado.¿Está diciendo que pasar de una clase que extiende
React.Componenta un componente de función provocó una regresión del rendimiento? ¿O ya estaba usandoReact.PureComponent(oshouldComponentUpdate)Puede usar
React.memopara obtener la misma semántica de rescate con componentes de función.