Capítulo 4. Dentro de la reconciliación
Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com
Para ser realmente fluidos en React, necesitamos entender lo que hacen sus funciones. Hasta ahora, hemos entendido JSX y React.createElement. También hemos comprendido el DOM virtual con cierto nivel de detalle apreciable. Exploremos sus aplicaciones prácticasen React en este capítulo, y comprendamos lo que hace ReactDOM.createRoot(element).render(). En concreto, exploraremos cómo React construye su DOM virtual y luego actualiza el DOM real mediante un proceso llamadoconciliación .
Comprender la conciliación
A modo de breve resumen, el DOM virtual de React es un plano del estado deseado de nuestra interfaz de usuario. React toma este plano y, mediante un proceso llamadoreconciliación, lo convierte en realidad en un entorno anfitrión determinado; normalmente un navegador web, pero posiblemente otros entornos como shells, plataformas nativas como iOS y Android, etc.
Considera el siguiente fragmento de código:
import{useState}from"react";constApp=()=>{const[count,setCount]=useState(0);return(<main><div><h1>Hello,world!</h1><span>Count:{count}</span><buttononClick={()=>setCount(count+1)}>Increment</button></div></main>);};
Este fragmento de código contiene una descripción declarativa de lo que queremos que sea el estado de nuestra interfaz de usuario: un árbol de elementos. Tanto nuestros compañeros ...