Como prop, recibe un título y quiere renderizar un H1 con la clase 'main title'. Dentro del H1 estará el título. Lo usaríamos de esta manera en GSX, ¿verdad? Así que crearemos el componente de título principal y le daremos la cadena como título. Y una vez transformado en JavaScript, se verá algo como esto, donde el tipo ahora es la función de título principal que hemos definido aquí. Y dentro de las props, igual que antes, ¿verdad? Recibimos nuestras props de la manera normal. Y ahora tenemos que pensar un poco en lo que significa cuando recibimos una función aquí y cómo podemos manejar eso. Y hemos empezado a adentrarnos un poco más en la arquitectura de cómo hacemos las cosas.
Entonces, lo que ya hemos hecho es crear aquí esta función GetRenderableVDom que proviene del índice y aquí la estamos llamando. Y lo que obtenemos aquí básicamente será, la idea es que los componentes no son realmente algo que sepamos cómo renderizar dentro del DOM. Por lo que no son muy importantes para los controladores del DOM, pero para nuestra función de React, a largo plazo, son bastante importantes porque necesitamos saber cómo renderizarlos. Por lo tanto, decidimos que dentro de este archivo solo tendríamos cosas que sepamos cómo manejar dentro del DOM. Y por otro lado, podemos manejar cosas que son más específicas de React, como los componentes. Y vayamos a nuestro otro índice, a nuestro índice, lo siento, no otro índice, ese es el único índice. Y así tenemos nuestra función GetRenderableVDom, que está aquí, y estamos hablando de VDom aquí, y lo presentaré en un segundo. Pero primero, creo que podemos ver cómo funciona nuestro render. Entonces, el renderizador funciona de manera bastante similar al otro lado, ¿verdad? Tenemos una función similar aquí que maneja primitivas y otros componentes de manera diferente. Y para las primitivas, no hace mucho. Básicamente, solo devuelve las primitivas porque no tenemos que hacer nada con ellas. Y para nuestros elementos de componente, extrae los children y las props, y en caso de que tengamos children, hay un paso adicional aquí para verificar si los children son un array o no, y si no son un array, por conveniencia, los transforma en un array, y luego los mapea y también los renderiza, y luego devuelve los children como resultado de renderizarlos dentro de este archivo. Y luego aquí es donde tendremos que manejar los componentes, por lo que en caso de que nuestro tipo sea una función, eso significa que estamos tratando de renderizar un componente funcional. Entonces, colocamos el tipo en este componente funcional, y aquí ahora tendremos que renderizarlo realmente, y hemos hablado bastante sobre el vdum. Así que hablemos sobre el vdum. La idea del vdum es tener una representación del árbol actual que tenemos en React de una manera que podamos almacenarlo en memoria y tener fácil acceso a diferentes componentes dentro de él. Y la razón, o algunas de las razones por las que querríamos eso, una de ellas es más adelante cuando intentemos introducir los hooks, entonces tendremos que saber a qué componente pertenece un hook. Por lo tanto, tendremos que tener algún tipo de representación vertical y con el tiempo, a medida que volvamos a renderizar, necesitaremos saber, ya sabes, como el estado anterior de este componente era esto. Entonces, cuando volvamos a renderizar, tendremos que tener el estado nuevamente. Y una vez que también entremos en la diferenciación y las actualizaciones dirigidas, en ese momento también tendrá la importancia similar donde podemos comparar el actual con el anterior para poder entender qué ha cambiado con el tiempo. Entonces, pensemos un poco en cómo puede verse eso. Si imaginamos una página HTML, algo así, donde tenemos un div principal que contiene como primer hijo otro div, luego este div contiene como hijo un span y esto dice, ¡hola mundo! Y el div principal, el div raíz, también contiene otro hijo, que dice otro span. Y tratamos de pensar en cómo podemos identificar todos esos y la forma en que React realmente lo hace se basa en dónde están dentro del árbol, ¿verdad? Entonces, todo se basa en su posición en el árbol. Entonces, una forma en que podemos representar esta estructura en una estructura similar a un árbol podría ser algo como esto. Tenemos nuestro div superior, tiene dos hijos, y el primer hijo también podría tener el ID cero. Eso es el children en el índice cero, y este podría tener el ID uno. Eso es el children en el ID uno, y luego hacemos lo mismo a medida que bajamos, pero simplemente agregamos al puntero ya existente a medida que avanzamos. Entonces, este es el primer hijo de este div, y como también es un hijo de este div, comenzará con cero para identificar este div, luego una coma, y luego dentro de este div, es el primer hijo, y este es el primer hijo de este. Por lo que hereda básicamente toda la estructura que fue antes que él y luego agrega una coma cero, y en el otro lado, este es el segundo hijo. Por lo tanto, ese es el índice uno y su hijo sería uno coma cero porque ese es el índice cero dentro de este. Bien. Eso no es todo. Sí, está bien. Y lo siguiente en lo que debemos pensar, ¿verdad?, en lo que ya comenzamos a hablar es que algunas cosas en realidad no se están renderizando en el DOM final del navegador, pero solo son importantes para nuestro vDOM, y la mayoría de esto son componentes. Entonces, si ahora imaginamos este JSX, tiene un div, un h1, luego una sección y luego un componente aquí. Pero esto no sería válido en HTML, ¿verdad? Solo funciona en JSX / React. Pero aún así, continuemos con este ejemplo. Y supongamos que nuestro contador se ve algo como esto. Es un componente que tiene un estado, comienza en cero, que es un contador, y luego renderiza un div, un span que dice el contador es el contador que está aquí, y un botón que simplemente incrementa el contador si haces clic en él, que tiene un signo más como texto. Entonces, sabiendo esto, podemos suponer que para la primera renderización, esta será la estructura que tenemos al final en HTML dentro del navegador. Y en este caso, ¿verdad?, el contador ya no está aquí, sino que ha sido reemplazado por nuestro div, que es renderizado por nuestro contador. Cuando hablamos del vDOM renderizable, estamos imaginando esto, ¿verdad? Como sin componentes.
Comments