SwiftUI Series 08 ｜ Errores comunes de la lista SwiftUI: actualizar, eliminar, saltar y rendimiento

List es uno de los controles en SwiftUI que es más fácil de “parecer fácil de escribir” y también más fácil de meterse en problemas en los negocios reales.

Porque muchos ejemplos simples funcionan bien:

• Los datos se pueden mostrar tan pronto como se introducen
• También se puede acceder a la actualización desplegable
• Eliminar, saltar y particionar parecen tener capacidades listas

Pero una vez que comienza a aparecer en el proyecto:

• Paginación
• Buscar
• Vinculación de estado después de la eliminación
• Saltar a detalles y regresar
• Carga de imágenes

El problema de List quedará expuesto gradualmente.

1. La causa fundamental de muchos problemas de Lista es que la “identidad de los datos” no se piensa con claridad.

Muchos comportamientos de SwiftUI están fuertemente relacionados con la identidad. Si los datos de la lista “parecen iguales” pero la identidad es inestable, aparecerán fácilmente más adelante:

• Rebota al refrescarse
• Animación extraña al borrar.
• La posición de desplazamiento es anormal después de regresar a la lista
• El contenido de una determinada fila se actualiza incorrectamente

Entonces, lo más básico y más subestimado de List es:

• ¿Es estable la identidad de cada elemento?
• ¿Esta identidad sigue siendo confiable al actualizar, paginar y buscar?

Muchas listas de “errores metafísicos”, la causa raíz final está aquí.

2. La actualización y la paginación a menudo alteran el estado de la lista.

Debido a que la actualización y la paginación esencialmente modifican la “colección de listas actual”, los cambios en la colección afectarán directamente:

• relación de reutilización de células
• posición de desplazamiento
• Estado de carga actual
• Cambiar entre estado vacío y estado de contenido

Si estas relaciones no se aclaran, es fácil que:

• La lista parpadeará cuando bajes para actualizar.
• Paginar hacia atrás y recalcular la lista completa.
• Los resultados antiguos sobrescriben el contenido nuevo.

Entonces, la verdadera dificultad con List suele ser:

• ¿Qué estados se deben conservar al actualizar?
• ¿Qué estados se deben agregar al paginar? -Si habrá conflictos simultáneos entre solicitudes del mismo tipo

3. Las operaciones de eliminación a menudo no son tan simples como “eliminar un elemento”

A primera vista, la eliminación simplemente elimina un elemento de la matriz. Pero en las listas reales, la eliminación suele afectar a estas cosas al mismo tiempo:

• Colección de visualización actual
• Juicio de estado vacío
• estado seleccionado
• Estado de salto
• Estado de sincronización de backend

Si simplemente “borra primero y luego habla”, es fácil:

• La eliminación se realizó correctamente, pero la página de detalles aún apunta al objeto anterior.
• Cuando la eliminación falla, la lista y el estado del servidor son inconsistentes
• La animación está bien, pero la lógica de reversión de la fuente de datos es confusa.

Esto muestra que la verdadera dificultad para eliminar es:

• ¿A quién pertenece la fuente de datos?
• ¿La eliminación es una actualización optimista o está esperando la confirmación del servidor?
• ¿Cómo cerrar el estado de navegación después de la eliminación?

4. Saltar es fácil de enredar con List y causar problemas.

Es común considerar las listas y los saltos como funciones independientes, pero en proyectos reales están muy relacionados.

Las preguntas típicas incluyen:

• Elimine el elemento actual después de hacer clic en los detalles y el regreso al estado de la lista es incorrecto.
• Después de actualizar la lista, la ruta seleccionada original dejará de ser válida.
• Los resultados de la búsqueda saltan a los detalles y luego regresan, y se restablece el estado de la lista.

La naturaleza de estos problemas suele ser:

• Listar el estado de los datos.
• Estado del artículo seleccionado
• Estado de la ruta de navegación

no se tratan como el mismo conjunto de problemas.

5. Los problemas de rendimiento son particularmente fáciles de explotar en la Lista

Porque la lista magnifica muchos pequeños problemas.

Por ejemplo:

• la jerarquía de vista de elementos es demasiado profunda
• Carga y decodificación de imágenes demasiado tarde
• La conversión de texto y datos se realiza en la etapa de visualización.
• La granularidad de actualización es demasiado grande.

Estos costos pueden ser soportables en páginas normales, pero en escenarios de desplazamiento de alta frecuencia como List, pueden provocar fácilmente caídas de fotogramas y parpadeos.

Por lo tanto, hay muchos problemas de rendimiento del List y es particularmente sensible a la identidad de los datos, el rango de actualización y el tiempo de visualización.

6. Una idea más estable: primero trate la Lista como “proyección de estado” en lugar de “contenedor de datos”

Una situación común es que al escribir una lista, el valor predeterminado en mente es:

• Tengo un conjunto de datos.
• Poner en la lista

Una idea más estable en proyectos reales es:

• ¿Cuál es el estado actual de la página?
• ¿En qué lote de elementos de la lista debería proyectarse este conjunto de estados?
• Qué elementos de la lista tienen identidades estables
• Qué acciones del usuario cambiarán este conjunto de estados.

Una vez que piensa en List como una proyección de estado en lugar de un simple contenedor, muchas preguntas comienzan a aclararse:

• Dar prioridad a la identidad
• Eliminar, actualizar y paginar no se pueden ver por separado
• El estado de salto también debe considerarse en conjunto.

7. Conclusión: La verdadera dificultad de List es que “identidad, estatus e interacción” pueden enredarse fácilmente.

Para decirlo en forma más breve, diría:

List en SwiftUI La parte realmente difícil es que una vez que las interacciones de la identidad de los datos, el estado de la página y la eliminación/actualización/salto se entrelazan, si no se establece algún límite, los problemas quedarán expuestos juntos.

Por lo tanto, si desea utilizar List de manera estable, la clave es primero:

• identidad del artículo
• Estado de la lista
• Flujo de estado después de la interacción.

Aclare estas tres cosas.