Como me recuerdo a mí mismo acerca de React Collocation
Cuando construyo componentes de React , lo que me confunde es la re-renderización no deseada. Algunos componentes se vuelven a renderizar sin mis intenciones.
Sin embargo, leí un truco para reducir los problemas de reproducción no deseados, no son los mejores consejos, pero son bastante útiles, se llama colocación . ¿Que es eso? por lo que entiendo, el concepto principal es usar el estado lo más cerca posible del componente que lo usa.
Buceo en
Vamos a sumergirnos, creo 3 componentes súper simples,
- App.js (como padre),
- FirstChild.js (como primer hijo),
- y SecondComponent.js (como segundo hijo).
La imagen de arriba muestra que todos los componentes se renderizan incluso el <SecondChild /> que no usa el estado.
Lo que queremos no es renderizar el componente que no usa el estado . Solo usamos el estado en <FirstChild /> solamente. ¿Cómo podemos hacer eso? Moviendo el estado lo más cerca posible al componente lo usa. así que mejoremos el código anterior moviendo el estado dentro
<Aplicación />
<Primer niño /> :
y mantenga el <SecondComponent /> sin cambios.
Resultado
nuevamente, en el primer renderizado, se espera renderizar todos los componentes.
ahora tecleemos la entrada de nuevo
¿Ves las diferencias? escribimos 5 letras y solo volvemos a renderizar el registro de la consola dentro de <FirstChild /> ! Sin embargo, el <SecondChild /> no se vuelve a renderizar en absoluto
¿Por qué?
Recuerde que react volverá a renderizar el componente y todos los elementos secundarios dentro de él si hay cambios en los estados o accesorios. En el primer ejemplo anterior, pusimos el estado en el componente principal, por lo que cuando escribimos, incluso si había componentes secundarios que no usaban el estado, también se procesó porque se cambió el estado principal.
Entonces, basándonos en esa teoría, movimos el estado al único componente que lo usaba. Al hacer esto, el estado solo cambió dentro de <FirstChild /> sin afectar a <SecondChild /> y al padre.
Consejos sencillos pero útiles. 👌
referencias:
- https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster
- https://kentcdodds.com/blog/colocation
Suggested posts
Búsqueda de información sobre nombres de dominio
Un extracto de Small, Sharp Software Tools de Brian P. Hogan
Cuando realiza una solicitud a facebook.com, su computadora busca el nombre de dominio para traducir ese nombre de dominio en una dirección IP para que su computadora pueda hacer esa conexión.
Evitar las consecuencias devastadoras de un derrame cerebral: aprender del viaje de una familia.
Introducción Un accidente cerebrovascular es una emergencia médica que puede afectar a cualquier persona en cualquier momento. Ocurre cuando se interrumpe el flujo de sangre a una parte del cerebro, lo que lleva a una pérdida repentina de la función cerebral.
Related posts
Rastree a cualquiera con solo un número de teléfono | Investigación OSINT
Puede ser un investigador de OSINT, un jugador de CTF o simplemente alguien que recibe llamadas no deseadas. Alguien que está tratando de verificar el número que viste en un anuncio.
La semana de aprendizaje en el trabajo es más importante de lo que piensas
A menudo nos encontramos luchando para implementar lo que sabemos que es bueno para nosotros. Desde decirle a un ser querido que lo amamos hasta recordar hablar como un pirata, siempre habrá quienes digan que no hace falta un día, una semana o un mes de eventos porque ya están haciendo esas cosas.