Tengo una aplicación de reacción que usa Material UI v5. No tengo ningún estilo y estoy usando el componente TextField predeterminado para probar el problema de representación. En mi página, solo tengo Typography , Breadcrumb , IconButton y TextField . Para replicar el problema, he puesto un TextField controlado y otros seis TextFields no controlados. Cuando empiezo a escribir en el TextField controlado, todos los componentes dentro de la página comienzan a volver a renderizarse. Y si empiezo a escribir mucho/más rápido, a veces se congela o toma un tiempo (como 500-1000ms) para mostrar el texto dentro de TextField. Básicamente se congela por un segundo o medio.
Aquí hay una demostración replicada de lo que tengo. Mi proyecto real también está usando create-react-app. Tengo lo mismo en mi aplicación de reacción y renderiza todo. Aquí hay un enlace a una instantánea tomada. Utilicé la opción "Resaltar actualizaciones cuando se procesan los componentes" de los perfiladores de herramientas de desarrollador de reacción.
Detalles de mi entorno:
System: OS: Windows 10 10.0.19043 Binaries: Node: 14.17.4 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52) npmPackages: @emotion/react: ^11.4.1 => 11.4.1 @emotion/styled: ^11.3.0 => 11.3.0 @mui/core: 5.0.0-alpha.47 @mui/icons-material: ^5.0.0 => 5.0.0 @mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.47 @mui/material: ^5.0.0 => 5.0.0 @mui/private-theming: 5.0.0 @mui/styled-engine: 5.0.0 @mui/styled-engine-sc: ^5.0.0 => 5.0.0 @mui/styles: ^5.0.0 => 5.0.0 @mui/system: 5.0.0 @mui/types: 7.0.0 @mui/utils: 5.0.0 @types/react: 17.0.22 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^5.3.1 => 5.3.1¿Es este el comportamiento de reacción? ¿Puedo dejar de volver a renderizar/actualizar todos los componentes cuando un componente actualiza su estado?
Los componentes de React se fabrican utilizando una regla llamada descomposición. Cada componente puede tener un padre y un hijo (si no solo) y puede modelarse como se muestra en esta imagen. Reaccionar árbol de componentes
Cuando el estado se actualiza en el componente principal, para actualizar la pantalla, este componente se representa y también todos los componentes secundarios se representan en él.
si desea evitar este comportamiento en un componente de clase, debe usar shouldComponentUpdate, puede leer su documento aquí y si desea manejarlo en un componente funcional, puede usar useMemo hook, y puede leer su documento aquí
