Conceptos clave de reactividad: efectos, track y trigger

Comprende, paso a paso, cómo construir propiedades reactivas y objetos reactivos en JavaScript con los conceptos clave: efectos, track y trigger. Verás qué hace cada uno, cómo se relacionan con dependencias dinámicas y por qué un proxy es el primer paso para observar y modificar el comportamiento por defecto.

¿Qué es reactividad y cómo se aplica?

La reactividad busca que un cambio en los datos actualice de forma consistente todo lo que depende de ellos. Crear un proxy permite observar y también modificar el comportamiento por defecto en JavaScript, habilitando el seguimiento de cambios y su propagación.

• Propiedades reactivas: cambian y afectan otras partes del estado o la vista.
• Objetos reactivos: agrupan propiedades que se observan como un todo.
• Proxy como base: observa accesos y escrituras para reaccionar a cambios.

¿Cómo funcionan efectos y dependencias dinámicas?

Los efectos son todo lo que produce un cambio visible o un cálculo derivado. Las dependencias son los valores que, al cambiar, requieren reejecutar ese efecto.

¿Qué es un efecto y cómo se aplica?

Un efecto es la reacción concreta a datos. Si tienes variables como cantidad y precio, el efecto es multiplicarlas para obtener un total. En la interfaz, modificar el inner text de un span según un dato es también un efecto.

• Efecto de cálculo: cantidad x precio produce total.
• Efecto en la UI: actualizar el inner text de un span según un valor.
• Reactividad práctica: cuando cambian los datos, el efecto se ejecuta otra vez.

¿Qué es una dependencia y por qué importa?

Las dependencias son los datos de los que depende un efecto. Si cambian, el efecto debe recalcularse o reejecutarse para mantener la coherencia del estado y la vista.

• Dependencias de un total: cantidad y precio.
• Dependencia en la vista: message al actualizar el inner text.
• Regla esencial: si la dependencia cambia, el efecto se reejecuta.

¿Qué hacen track y trigger en el flujo reactivo?

Para que los efectos respondan a cambios, necesitamos dos mecanismos coordinados: track y trigger. El primero registra qué depende de qué; el segundo dispara la reejecución cuando algo cambia.

¿Cómo usamos el track para seguir dependencias?

El track registra las dependencias de un efecto mientras este se ejecuta. Así, al leer cantidad, precio o message, se establece la relación efecto → dependencias.

• Seguimiento automático: al acceder a un dato durante un efecto, queda registrado.
• Dependencias dinámicas: cambian según lo que el efecto lea.
• Eficiencia: solo se reejecuta lo que depende de lo modificado.

¿Cuándo dispara trigger la reejecución del efecto?

El trigger se activa cuando una dependencia cambia. Entonces busca los efectos vinculados y los ejecuta de nuevo.

• Escritura en datos: al cambiar cantidad, precio o message, se activa.
• Reejecución dirigida: solo corre el efecto asociado a esas dependencias.
• Actualización visible: el total se recalcula o el inner text del span se actualiza.

¿Te gustaría compartir cómo aplicarías estos conceptos en tu framework o en tu “mini view”? Comenta tus ideas y casos de uso.