Curso Laravel Livewire - Ciclo de vida de los componentes

En Livewire, tenemos múltiples funciones que podemos emplear y que se llaman de manera automática según el estado del componente; esto sucede en muchos otros casos en otras tecnologías con en Android, Flutter, Vue… y estos por nombrar algunos; son sumamente útiles porque con ellos podemos realizar procesos que de otra forma serían complicados de definir; por ejemplo, inicializar propiedades como vamos a realizar luego cuando queramos editar un registro o categoría.

Para poder entender claramente que es lo que sucede cuando se ejecutan estos métodos del ciclo de vida, activa el log del sistema a nivel de archivo ya que, lo vamos a usar luego:

LOG_CHANNEL=single

Con los logs para los archivos, recuerda que se registran en:

'path' => storage_path('logs/laravel.log'),

En nuestro componente de Save.php de las categorías; vamos a definir los siguientes métodos:

use Log;
***
public function boot()
{
    Log::info("boot");
}

public function booted()
{
    Log::info("booted");
}

public function mount()
{
    Log::info("mount");
}

public function hydrateTitle($value)
{
    Log::info("hydrateTitle $value");
}

public function dehydrateFoo($value)
{
    Log::info("dehydrateFoo $value");
}

public function hydrate()
{
    
    Log::info("hydrate");
}

public function dehydrate()
{
    Log::info("dehydrate");
}

public function updating($name, $value)
{
    Log::info("updating $name $value");
}

public function updated($name, $value)
{
    Log::info("updated $name $value");
}

public function updatingTitle($value)
{
    Log::info("updatingTitle $value");
}

public function updatedTitle($value)
{
        Log::info("updatedTitle $value");
}

Estos métodos, que forman parte del ciclo de vista, lo que hacen es imprimir en el log del sistema un mensaje que corresponde al nombre del método, y si el mismo recibe parámetros, también los registra en el log; estos parámetros son o valores o nombres y valores.

Como pruebas que debes realizar:

1. Accede a tu log.
2. Remueve cualquier log que exista en dicho archivo.
3. Guardas los cambios en dicho archivo.
4. Accede al componente de Save.php mediante tu navegador.
5. Revisa el log.
6. Da un click al botón de submit en el formulario.
7. Revisa el log.
8. Escribe algo en alguno de los campos de texto que tenga el wire:model.
9. Revisa el log.

 

La idea es que vayas haciendo pruebas, eliminando el contenido del log y probando componentes que, actualicen de manera directa las propiedades (como los campos de tipo wire:model), ingresar por primera vez al componente y dar clicks en botones que no actualicen los datos de los wire:model.

storage/logs/laravel.log

[2022-03-23 17:07:15] local.INFO: boot  
[2022-03-23 17:07:15] local.INFO: mount  
[2022-03-23 17:07:15] local.INFO: booted  
[2022-03-23 17:07:15] local.INFO: render  
[2022-03-23 17:07:15] local.INFO: dehydrate  
[2022-03-23 17:07:18] local.INFO: boot  
[2022-03-23 17:07:18] local.INFO: hydrateTitle   
[2022-03-23 17:07:18] local.INFO: hydrate  
[2022-03-23 17:07:18] local.INFO: booted  
[2022-03-23 17:07:18] local.INFO: updating title asas  
[2022-03-23 17:07:18] local.INFO: updatingTitle asas  
[2022-03-23 17:07:18] local.INFO: updated title asas  
[2022-03-23 17:07:18] local.INFO: updatedTitle asas  
[2022-03-23 17:07:18] local.INFO: render  
[2022-03-23 17:07:18] local.INFO: dehydrate  

 

Por supuesto, podemos aprovechar estas funciones para realizar procesos cruciales para nuestro componente, como por ejemplo, inicializar datos al crear un componente.

 

Aquí hay tres bloques principales:

1. Las funciones de tipo update() se invocan cuando se actualizan las propiedades del componente, por ejemplo como el de wire:model; existen variantes como la de updated() y updating() cuyo funcionamiento es el mismo salvo que el de updating() se ejecuta antes.
   1. También tenemos la variante de update<Propiedad> la cual la podemos atar a una propiedad.
   2. Al ejecutar la función updated() la propiedad aún no ha sido actualizada, al ejecutar updated(), la propiedad ya fue actualizada.
2. Funciones de hidrate() son usadas para cuando pasamos datos entre la vista y lo mapea a un objeto en PHP en la clase componente; por ejemplo, cuando se mapea las propiedades a un JSON para pasarlos a la vista para los wire:model:

 

1. Las funciones de dehydrate() son usadas para justamente lo contrario de las de hidrate(), es decir, son usadas para cuando pasamos datos entre la clase componente a la vista; por ejemplo, cuando se mapea las propiedades a un JSON para pasarlos a la vista para los wire:model.

 

1. En definitiva, estas funciones son para las actualizaciones a nivel del componente en el pase de mensaje y no solamente la data del mismo.
2. Funciones del ciclo de vida básico como la de render(), boot(), o booted() que se ejecutan como parte del ciclo de vida al actualizar el componente.
   1. En este renglón también existe la función de mount() la cual se ejecuta solamente una vez al montar el componente, a diferencia de las anteriores y como puedes ver en el log señalado anteriormente.

En conclusión, las funciones más usadas para el ciclo de vida de los componentes son las de update, en cualquiera de sus variantes y la de mount() para inicializar datos.

Transcripción del vídeo

Vamos a ver algo muy interesante que sería el ciclo de vida del componente y es algo que por más que sea puedes heredar un poco o hereda un poco de lo que sería el controlador ya acá en el controlador o el esquema clásico que tenemos en laravel realmente no hay un ciclo de vida pero por más que sea Ah tenemos un método constructor que pudiéramos aprovechar para o que se ejecuta antes de lo que es el método en sí es decir cuando vamos a resolver ahí la petición Aquí también tenemos algo un poco más bueno similar pero más vitaminizado tal cual puedes ver y esto se asemeja también mucho a lo que sería View que tenemos un ciclo de vida para los componentes y que podemos aprovechar para hacer varias cosas realmente te voy te lo presento es netamente por cuestiones como quien dice teóricas pero realmente que usualmente utilizamos en el 100% de los casos o la mayoría de los casos viene siendo el dem Mount que es para cuando se monta el el componente y lo aprovechamos para inicializar bueno la Data por ejemplo quisieremos Buscar un post o algo por el estilo lo hacemos justamente aquí en el demount por lo demás tenemos otros como te comentaba pero usualmente no lo utilizamos tanto bueno por obvias razones yo no voy a escribir esto de manera manual para no tardar todo el día así que te pido que vayas a la última clase de esta sección en donde está el código fuente le des un click y busques este código que te lo a dejar ahí comentado justamente en el componente de de categorías que es el que tenemos aquí a la fecha el de save lo voy a dejar ahí comentado para bueno para ti Voy a colocarlo recuerda importar  aquí también el log ya te explico un poco los ejercicio aunque creo que ya se entiende bastante el de log viene siendo Bueno creo que este lo que vamos a hacer es imprimir algunos mensajes por el lot para ver cuándo se llama cada uno de estos métodos Entonces vamos a colocar el log Channel de de tipo single aquí lo podemos colocar en el F los Channel a ver si aparece No creo que no está log Channel igual a single laravel log lot creo que no está Bueno recuerda que este se genera en storage logs sí está es un poco loco que a veces lo busco y no lo encuentra voy a quitar todo esto y vamos a ver qué pasa regresamos acá recargamos y fíjate que ya por aquí aparecen varios de estos métodos el de Boot el de Mount que es como te digo el que más vamos a emplear y otros más entonces ya aquí puedes darle algunos click a los botones y por aquí van a ir apareciendo poco a poco el resto Fíjate que por ejemplo en el deting aparece cuál es la propiedad el nombre de la propiedad y el valor entonces en caso de que quieras hacer ahí algún control global para cualquiera que sea el sentido y lo puedes aprovechar por lo demás realmente no hay mucho más que decir en el curso prácticamente no vamos a utilizar ninguna sección del de m que otra vez viene siendo el más útil y el que usualmente siempre se emplea en la mayoría de los casos para preparar la Data que va a necesitar el componente para poder trabajar y esto lo vamos a ver un un poco más en detalle eh más adelante cuando necesitemos inicializar ahí alguna Data Entonces es básicamente eso por lo demás no creo que haya mayor misterio Bueno recuerda que puedes ir aquí un poquito a la documentación oficial En caso de que te interese saber un poco más a ciencia cierta para que sirve cada uno de ellos aquí te lo explico un poco si quieres puedes ir pausando la clase y e ir leyéndolo aquí tal cual te los clasifico un poco las funciones de tipo se invocan Al actualizar las propiedades de nuestra plantilla tal cual te mostraba antes el did son usadas cuando pasamos datos entre la vista y lo mapea a un objeto en nuestra clase componente ahí también se invocan tal cual puedes ver, hicimos ahorita la prueba Recuerda que apenas nosotros cargamos la página el componente aquí solamente aparecían unos pocos y cuando actualizamos aquí y aquí apareció también los de tipo Y hidrate entonces aquí te indica Cuál es el que se está actualizando Y esto es para justamente lo contrario para cuando pasamos datos entre la clase componente a la vista y las función y estas son como quien dice parte del ciclo básico que son las de tipo render la de tipo Boot la de tipo booted y también la de tipo mounted son parte ya del ciclo de vida de nuestro componente y son las que más empleamos otra vez la que más emplearíamos aquí sería la de mounted para inicializar pero a la final lo puedes clasificar de ese tipo la de mountex te puedes olvidar un poquito del resto bueno obviamente aquí la de render para renderizar aquí nuestro template las de tipo dirate En caso de que sean necesarias para ti para hacer algo y las hidrate que bueno serían un poquito las siguientes más útiles aquí en la lista otra vez más información y tienes la documentación oficial esto te lo explico para que entiendas Cómo está formado livewire y su estructura básica pero realmente Esto no es algo tan utilizado como te he comentado antes así que bueno aclarado esto ya podemos dar por terminada esta clase otra vez Recuerda que todo esto te lo voy a dejar aquí comentado En caso de que quieras realizar pruebas y en caso de que sea necesario emplear alguno más adelante entraremos Un poquito más en profundidad en en cada uno de ellos o en el necesario Así que vamos a la siguiente clase.

27-08-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Curso Laravel Livewire - Ciclo de vida de los componentes