@composi/runtime:
View
Representación del Estado
View es una función que se ocupa de cómo presentar los datos del estado, lo que se llama la vista de la aplicación. No dicta cómo se producirá esa vista. Puedes hacer eso con la función render de @composi/core, o con cualquier otro arreglo para renderizar. Podría usarlo para devolver una cadena de HTML para la representación del lado del servidor o incluso devolver código nativo para el desarrollo de aplicaciones nativas. Aquí estamos tratando con el desarrollo para el navegador, así que usaremos la función render de @composi/core para renderizar nuestro programa en el DOM.
La función de view toma dos argumentos: estado y send. Ya deberías estar familiarizado con el estado. Send es una función que permite a la vista enviar mensajes a la función update. Enviar es una función unaria. Es decir, solo acepta un argumento. Por lo tanto, para ayudar la función update distinguir entre los mensajes lo pasamos un objeto con propipiedad de tipo. Si también necesitamos pasar algunos datos, puedemos incluirlos en el objeto del mensaje.
En general, recomendamos utilizar JSX para definir la vista que se va a crear, pero en su lugar podría usar la función h. Aquí está la misma vista creada con JSX y después con h:
function Lista({estado}) {
return (
<div>
<p>
<input type="text">
<button>Añadir</button>
</p>
<ul>
{
estado.ítems.map(ítem => <li key={ítem.clave}>{ítem.valor}</li>)
}
</ul>
</div>
)
}
Una mirada breve es suficiente para comprender cuáles elementos DOM se crearán. Ahora aquí está el mismo componente definido con h:
function Lista({estado}) {
return h(
'div',
{},
[
h(
'p',
{},
[
h(
'input',
{type: 'text'}
),
h(
'button',
{},
'Añadir'
)
]
),
h(
'ul',
{},
${
estado.ítems.map(ítem => h('li', {key: ítem.clave}, ítem.valor))
}
)
]
)
}
Como puedes ver, al usar la función h para crear los nodos virtuales en vez de JSX resulta en código más complejo y difícil de leer.
Enviar Mensajes
Las vistas pueden ser comlpetamente estáticas, como para un boletín de noticias o un blog. Pero frecuentamente muchas vistas van a requerir interacciones con el usuario. El entorno de ejecución de @composi/core proporciona la función send para que las vistas envíen mensajes y datos a la función update del programa.
Un mensaje puede ser de cualquier tipo : null, undefined, number, string, array u object. Sin embargo, en la mayoría de casos un mensage tendra que ser un objeto para que haya una interfaz consistente para que la función update pruebe el tipo de mensaje que recibe. Usar un objeto también permite que se pasan unos datos con el mensaje.
Cuando se define la view del programa, se le pasan dos argumentos, el estado y la función sned. En el ejemplo próximo fíjate cómo el componente de lista tiene evento de clic que envía un objeto como mensaje con tipo y unos datos. Esto hace posible use una sentencia switch en la función update para averiguar cuál tipo de mensaje se recibió.
See the Pen @composi/core + entorno de ejecución by Robert Biggs (@rbiggs) on CodePen.
La Hidración
La función render de @composi/core lo hace fácil de hidratar el contenido renderizado en el servidor. Solo proveer una referencia al elemento al cual quieres hidratar como el segundo argumento de render. Composi siempre monta un componente en el nodo que ya existe en el DOM, el cuál sirve cómo base del componente. Así pues, si tienes una lista renderizada en el servidor, puedes hidratarla automaticamente usando un selector para la lista como el argument segundo de la función render para el componente de la lista.