[Redireccionar] ¿Por qué el uso de flechas y enlaces en el renderizado de React causa problemas?
Original reimpreso de /p/29266705
El uso de flechas o enlaces en el renderizado hará que el componente secundario se vuelva a renderizar incluso si el estado no ha cambiado. El autor recomienda evitar el enlace extrayendo componentes secundarios o pasando datos en elementos HTML.
En este ejemplo, utilicé una función de flecha en la representación para vincular el ID de usuario correspondiente a cada botón de eliminación.
Haga clic en CodeSandbox para ver y reproducir la demostración completa. (CodeSandbox es realmente genial, es un editor en línea de React que compila y muestra la interfaz actual en tiempo real).
En la línea 35, estoy usando una función de flecha para pasar un valor a la función eliminarUsuario, y ahí es donde radica el problema.
Para comprender por qué sucede esto, eche un vistazo a User.js:
Cada vez que se realiza una llamada de renderizado, se imprime un registro en la consola. El usuario ha sido declarado como PureComponent, por lo que el usuario solo se volverá a representar cuando cambien los accesorios o el estado. Sin embargo, cuando hace clic en el botón Eliminar, se llama a render para cada instancia de Usuario.
La razón es que el componente principal pasa una función de flecha en los accesorios. La función de flecha se reasigna cada vez que se representa (de la misma manera que se usa bind). Entonces, aunque declaro Usuario como PureComponent, la función de flecha en el componente principal Usuario aún hace que el componente Usuario pase una nueva función para todas las instancias de usuario.
Conclusión:
Evite el uso de funciones de flecha y enlaces en el renderizado. De lo contrario, se interrumpirán las optimizaciones de rendimiento de mustComponentUpdate y PureComponent.
Comencemos con un ejemplo comparando la diferencia de no usar flechas en la presentación.
Haga clic en CodeSandbox para ver y ejecutar la demostración completa.
En este ejemplo, no hay flechas en la representación de index.js. Los datos relevantes se pasan a User.js:
En User.js, onDeleteClick llama a la función onClick pasada en accesorios y pasa el user.id correspondiente.
Cuando vuelves a hacer clic en el botón Eliminar, ¡otros usuarios ya no llaman a render!
Para obtener el mejor rendimiento:
Optimización del rendimiento de React Redux (1): teoría