React.Component vs React.PureComponent


224

El funcionario Reaccionar documentos afirman que " React.PureComponent's shouldComponentUpdate()única superficialmente compara los objetos", y aconseja en contra de este estado si es 'profunda'.

Dado esto, ¿hay alguna razón por la que uno prefiera React.PureComponental crear componentes React?

Preguntas :

  • ¿Hay algún impacto en el rendimiento en el uso React.Componentque podamos considerar React.PureComponent?
  • Estoy adivinando shouldComponentUpdate()de PureComponentsólo realiza comparaciones superficiales. Si este es el caso, ¿no se puede usar dicho método para realizar comparaciones más profundas?
  • "Por otra parte, React.PureComponent's shouldComponentUpdate()saltos apuntalar actualizaciones para todo el subárbol componente" - ¿Quiere esto decir que los cambios se ignoran prop?

La pregunta surgió de la lectura en este blog medio , si es útil.


55
Sé que han pasado un par de meses desde que publicó esto, pero pensé que este artículo podría ayudar: 60devs.com/pure-component-in-react.html
MrOBrian

Respuestas:


283

La principal diferencia entre React.PureComponenty React.Componentes PureComponentuna comparación superficial sobre el cambio de estado. Significa que cuando compara valores escalares, compara sus valores, pero cuando compara objetos solo compara referencias. Ayuda a mejorar el rendimiento de la aplicación.

Debes ir React.PureComponentcuando puedas cumplir cualquiera de las siguientes condiciones.

  • State / Props debe ser un objeto inmutable
  • El estado / los accesorios no deben tener una jerarquía
  • Debería llamar forceUpdatecuando los datos cambien

Si está utilizando React.PureComponent, debe asegurarse de que todos los componentes secundarios también sean puros.

¿Hay algún impacto en el rendimiento al usar React.component que podamos considerar para React.PureComponent?

Sí, aumentará el rendimiento de su aplicación (debido a la comparación superficial)

Supongo que shouldComponentUpdate () de Purecomponent realiza solo comparaciones superficiales. Si este es el caso, ¿no se puede usar dicho método para realizar comparaciones más profundas?

Lo has adivinado correctamente. Puede usarlo si cumple con alguna de las condiciones que mencioné anteriormente.

"Además, React.PureComponent shouldComponentUpdate () omite las actualizaciones de utilería para todo el subárbol componente" - ¿Esto significa que se ignoran los cambios de utilería?

Sí, los cambios de utilería serán ignorados si no puede encontrar la diferencia en la comparación superficial.


1
Hola @VimalrajSankar. Gracias por la ayuda. ¿Puede dar un ejemplo de la siguiente declaración It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.:? Gracias
Ishan Patel

1
@ Mr.Script Espero que esto ayude a stackoverflow.com/a/957602/2557900
vimal1083

3
State/Props should not have a hierarchylo siento, ¿puedes explicar un poco qué significa la jerarquía aquí?
Sany Liew

1
@SanyLiew significa que el estado y los accesorios solo deben contener valores primitivos como números y cadenas, pero no objetos dentro de objetos (una jerarquía).
jedmao

3
si state / props es un objeto inmutable, entonces debería estar bien tener una jerarquía y seguir usando PureComponent siempre y cuando esa jerarquía también mantenga un objeto inmutable, ¿verdad?
Sany Liew

39

Componenty PureComponenttiene una diferencia

PureComponentes exactamente lo mismo, Componentexcepto que maneja el shouldComponentUpdatemétodo por usted.

Cuando los accesorios o el estado cambien, PureComponentse realizará una comparación superficial tanto en los accesorios como en el estado. ComponentPor otro lado, no comparará los accesorios actuales y el estado con el siguiente fuera de la caja. Por lo tanto, el componente se volverá a representar de forma predeterminada siempre que shouldComponentUpdatese llame.

Comparación superficial

Al comparar accesorios y estado anteriores con el siguiente, una comparación superficial comprobará que las primitivas tienen el mismo valor (por ejemplo, 1 es igual a 1 o que verdadero es igual a verdadero) y que las referencias son las mismas entre valores de JavaScript más complejos como objetos y matrices.

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


React.Component => así que si vuelvo a representar el mismo componente con los mismos accesorios varias veces. activará el renderizado de su hijo. no importa si los accesorios cambiaron o no
Ehsan sarshar

23

La principal diferencia, según lo veo, es que un componente se retrae cada vez que su padre se retrae, independientemente de si los accesorios y el estado del componente han cambiado.

Un componente puro, por otro lado, no volverá a rendirse si su padre se vuelve a rendir, a menos que los accesorios (o estado) del componente puro hayan cambiado.

Por ejemplo, supongamos que tenemos un árbol de componentes con una jerarquía de tres niveles: padres, hijos y nietos.

Cuando los accesorios de los padres se cambian de una manera que se cambian los accesorios de un solo hijo, entonces:

  • si todos los componentes son componentes regulares, todo el árbol de componentes se volverá a procesar
  • Si todos los hijos y nietos son componentes puros, solo un hijo volverá a rendir, y uno o todos sus nietos, dependiendo de si se cambian sus accesorios. Si hay muchos componentes en este árbol de componentes, puede significar un aumento significativo del rendimiento.

A veces, sin embargo, el uso de componentes puros no tendrá ningún impacto. Tuve un caso así cuando el padre recibió sus accesorios de una tienda redux y necesitaba realizar un cálculo complejo de los accesorios de sus hijos. El padre usó una lista plana para representar a sus hijos.

El resultado fue que cada vez que hubo un pequeño cambio en la tienda redux, se recalculó toda la matriz de la lista plana de los datos de los niños. Esto significaba que para cada componente del árbol, los accesorios eran objetos nuevos, incluso si los valores no cambiaban.

En este caso, los componentes puros no ayudan, y el aumento del rendimiento solo se puede lograr mediante el uso de componentes regulares y la verificación de los elementos secundarios, en shouldComponentUpdate, si es necesario volver a generar.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.