0
223
Visualizações¿Cuándo React vuelve a renderizar el componente principal?
Actualmente estoy aprendiendo React y tratando de tener una idea de cómo se vuelven a renderizar los componentes. Tengo este componente principal que representa tres elementos. Cada elemento solo representa un <li>
function App() { console.log("Parent Rerendered"); return ( <div> <ul> <Item1 /> <Item2 /> <Item3 /> </ul> </div> ); }Item2 es un poco diferente porque también representa una "x" que anula la representación del componente cuando se hace clic en él:
function Item2() { const [visible, setVisible] = useState(true); const makeInvisible = () => { setVisible(false); }; console.log("Item 2 Rerendered"); return visible ? ( <div> <li> Second Item <span onClick={makeInvisible}>X</span> </li> </div> ) : null; } Cuando pruebo esto en mi navegador y hago clic en la "x", puedo ver desde la consola que Item2 se vuelve a renderizar. Sin embargo, ninguno de los otros componentes se vuelve a renderizar, incluido el componente principal. Sin embargo, el componente principal cambia, entonces, ¿cómo sucede esto sin volver a renderizarlo?
Si eso es un poco confuso, aquí hay una ilustración del estado inicial, mis expectativas y la realidad. ¿Qué estoy malinterpretando acerca de cómo React vuelve a renderizar los componentes?
2 Respostas
Responde à pergunta0
Un componente se vuelve a renderizar cuando establece el estado o cuando su padre vuelve a renderizar 1 . App no tiene estado ni padre, por lo que nunca se volverá a procesar. Aunque no es necesario. React guarda el DOM virtual del renderizado anterior, por lo que aún sabe que se supone que la App es un div que rodea un ul que rodea un Item1 , Item2 y Item3 . Si Item2 vuelve a representar y devuelve un valor nulo en lugar de un div, react actualizará la parte del DOM real de la que Item2 es responsable, eliminando el div. El resto de la página permanece intacta.
1) o si cambia un contexto que consume, o en un componente de clase cuando llama a forceUpdate. Pero para la mayoría de los casos, lo que importa es solo el estado y los padres.
0
En lugar de hacer clic en <Item2 /> vaya a Dev-tools -> Explorer -> seleccione el elemento y presione eliminar. La vista también cambiará, la brecha se cerrará, sin que la reacción esté involucrada en absoluto.
React es responsable de actualizar el DOM, el diseño lo realiza el navegador. Entonces, cuando <Item2 /> decide que quiere que se represente como null en lugar de div>li (??? marcado no válido) y, por lo tanto, elimina los nodos DOM respectivos, el navegador actualizará el diseño.
Y el componente padre no tiene nada que ver con todo eso.