El concepto de estado de vista temporal en JavaScript / Sudo Null IT News
¡Saludos a todos! En este artículo hablaremos de un tema bastante inusual, sobre el cual por alguna razón no encontré información, aunque es bastante útil en los marcos y bibliotecas de JavaScript modernos para crear interfaces de usuario, porque, en algunos casos, la aplicación del El concepto puede ayudar a acelerar el trabajo con el DOM varias veces.
El nombre es arbitrario, pero la esencia es importante.
El problema del estado normal.
El concepto de “estado regular” se refiere a datos que se guardan directamente gracias a los administradores estatales, o gracias a la funcionalidad interna de un marco o biblioteca. Estado de ejemplo en Vue.js:
createApp({
setup() {
return {
count:ref(0);
};
},
template: `<div>
<button @click="count++">Click!</button>
<div>Clicks: {{ count }}</div>
</div>`,
}).mount("#app");En este caso, el estado se almacena directamente en un objeto, que se devuelve en un método marco predefinido.
Entonces, los nodos DOM pueden depender de un estado determinado a través de diferentes estructuras sintácticas. En el ejemplo, tal construcción es la línea {{ clicks }} que cambia a los datos actuales debido a la interpolación de cadenas.
Además, una construcción sintáctica de uso frecuente es “ciclo”. Un bucle es una palabra clave, un atributo o un método que especifica explícitamente que se crearán nodos DOM, dependiendo de la cantidad de elementos y de los valores mismos provenientes del estado. En este artículo analizo este tema más específicamente. Bucle de ejemplo:
<template>
<tr
v-for="{ id, label } of rows"
:key="id"
:class="{ danger: id === selected }"
:data-label="label"
v-memo="(label, id === selected)"
>
<td class="col-md-1">{{ id }}</td>
<td class="col-md-4">
<a @click="select(id)">{{ label }}</a>
</td>
<td class="col-md-1">
<a @click="remove(id)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td class="col-md-6"></td>
</tr>
</template>Digamos que queremos actualizar class elemento. Nuestros datos vienen en forma de una serie de objetos. Está claro que necesita especificar explícitamente la clave: valor de clase en el objeto y obtener todo usando la clave entre llaves dobles, pero este es el principal problema, porque de alguna manera es lento.
Para confirmar mis palabras, tomaré puntos de referencia del marco cample.js (durante cuyo desarrollo acabo de notar un problema similar). Allí se puede ver claramente que una clase que depende directamente de los datos del estado normal se instala más lentamente que una clase que usa un estado de Vista temporal.
Tomemos dos versiones de cample.js: 3.2.0-alpha.45 y 3.2.1-beta.0. Existe una línea llamada “seleccionar fila” (línea 4), que es donde radica la principal diferencia:
Datos tomados de 126 y 128 lanzamientos de referencia.
Como se puede observar en la imagen, la diferencia entre un resultado y otro es casi una vez y media. Pensé durante mucho tiempo por qué es así. Solía asumir que el código era lento, pero el hecho es diferente. Si los datos pasan por un estado regular, entonces es necesario revisar todos los datos, incluso si solo cambiamos una letra en el valor de una propiedad en un objeto n-ordinal.
const oldData = (
{
id: 1,
label: "Текст 1",
},
{ id: 2, label: "Текст 2" },
{
id: 3,
label: "Текст 3",
}
);
const newData = (
{
id: 1,
label: "Текст 11", // 1 итерация поменялась одна буква, но всё равно смотрим дальше
},
{ id: 2, label: "Текст 2" }, // 2 итерация
{
id: 3,
label: "Текст 3", // 3 итерация
}
);Por lo tanto, siempre será lento, pero este es un enfoque lógicamente correcto y parece ser la principal broma de todos los marcos y bibliotecas modernos para crear interfaces de usuario. Pero ¿cuál podría ser una alternativa a este enfoque?
Estado de vista temporal
Especialmente para tal problema, cuando es necesario introducir un estado separado del principal, para no pasar por los elementos varias veces, puede usar un determinado concepto en el código que le permitirá vincularse no a un objeto, sino a un elemento. Este concepto es un estado de Vista temporal.
Su esencia es la siguiente: creamos una matriz separada para cada elemento. Estará ubicado en el código del propio módulo y le proporcionaremos al usuario métodos que interactúan con esta matriz en la función de devolución de llamada. Por tanto, el módulo almacenará algo como este código:
{
el:li,
temporaryViewState:({class:"value"})
}Y en el proyecto algo como esto:
setClass: (
(setData, event, eachTemporaryViewState) => () => {
const { setTemporaryViewState, clearTemporaryViewState } = eachTemporaryViewState;
clearTemporaryViewState();
setTemporaryViewState(() => {
return { class: "value" };
});
},
"updateClass",
),Además, esta matriz se puede crear solo cuando se llama a la función de devolución de llamada, o simplemente puede crear una matriz para todos los elementos. Esto nos permitirá no estar atados a datos que provienen del estado normal, sino a un elemento específico que queremos actualizar. Es decir, parece que creamos un estado temporal que se puede borrar y sobrescribir. Esto es bueno para los casos en los que queremos trabajar con elementos no controlados:
<!-- Контролируемый -->
<input type="text" value="{{ value }}" ::change="setValue()" />
<!-- Неконтролируемый -->
<input type="text" class="{{ temporaryViewState.class }}" />Es decir, simplemente no depende directamente del estado normal, por lo que en el DOM este nodo, se podría decir, será estático (si creamos una plantilla de nodo, este elemento se omitirá).
Por tanto, tenemos un estado que depende sólo de un elemento específico y de la función de devolución de llamada. Cuando se trabaja con un “bucle”, no es necesario recorrer toda la matriz de datos para actualizar una letra en un elemento. Será suficiente simplemente llamar a una función específica en un elemento específico y actualizar la clase específica.
Esto le permitirá lograr resultados rápidos al trabajar con datos y DOM. Este concepto es muy posible de aplicar y trabajar con marcos y bibliotecas modernos.
