Durum Makinesi Kullanıcı Arayüzü: Belirleyici, Hatasız Arayüzler Oluşturma
React'te görsel durum makinelerinin imkansız kullanıcı arayüzü durumlarını nasıl ortadan kaldırdığını, karmaşık etkileşimli bileşenleri nasıl basitleştirdiğini ve deterministik, hatasız arayüzler oluşturduğunu öğrenin.
Ana nokta
UI durum makinesi, bir arayüz bileşeninin işgal edebileceği tüm geçerli durumları ve kullanıcı olayları veya sistem koşulları tarafından tetiklenen bu durumlar arasındaki açık geçişleri açıklayan matematiksel bir modeldir. Durum makineleri, "imkansız durumları imkansız" hale getirerek kullanıcı arayüzü hatalarının tüm kategorilerini ortadan kaldırır; durum makineniz bu kombinasyonu yasaklarsa, yükleme döndürücünüz ve başarı onay işaretiniz aynı anda görünemez.
Sorun Durumu Makinelerinin Çözdüğü Sorun
Çoğu kullanıcı arayüzü hatası, mantıksal olarak imkansız durumlara girebilen bileşenlerden kaynaklanır. Klasik bir örnek: Açık durum modeli olmayan bir form gönderme düğmesi, iki ayrı boole bayrağından aynı anda "yükleniyor" durumunda ve "devre dışı" durumda olabilir. Bir durum makinesi, bileşenin herhangi bir anda her zaman tam olarak iyi tanımlanmış bir durumda olmasını gerektirerek bunu önler.
- "Boole bayrağı cehennemi" - isLoading, isDisabled, isError, isSuccess tüm çelişkili
- Hızlı kullanıcıların aynı anda birden fazla durumu tetiklediği yarış koşulları
- Animasyonların yanlış ara konumlardan başlamasına neden olan geçiş hataları
- Kod incelemesinde n × n işaret kombinasyonunun izlenmesinden kaynaklanan geliştirici bilişsel yükü
Çekirdek Durum Makinesi Kavramları
Durum makineleri, sonlu bir durum kümesinden, geçişleri tetikleyebilecek olaylar sözlüğünden ve bir geçişe izin verilip verilmeyeceğini belirleyen koruyucu koşullardan oluşur.
Devletler
Her durum bileşenin belirli bir durumunu temsil eder. Veri getirme bileşeni örneği: boşta kalma, yükleme, başarı, hata, yenileme.
Etkinlikler / Geçişler
Olaylar durum değişikliklerini tetikler. "SUBMIT", bir formu boş durumdan yükleme durumuna geçirir. "BAŞARI" yüklemeden başarıya geçiştir. "HATA" yüklemeden hataya geçiş yapar.
Muhafızlar
Yangına geçiş için doğru olması gereken koşullar. Bir "SUBMIT" olayı yalnızca form doğrulama koruması başarılı olursa boşta → yükleme geçişini tetikleyebilir.
Bağlam / Genişletilmiş Durum
Geçerli durum adının yanı sıra makinenin taşıdığı yardımcı veriler (kullanıcı giriş değerleri, hata mesajları, yüklenen veriler).
ExodeUI'deki Durum Makineleri
ExodeUI görsel bir düğüm grafiği durumu makine düzenleyicisi sağlar. Durumları daireler halinde çizer, olayları temsil eden etiketli oklarla birbirine bağlar ve her duruma bahar animasyonları ve görsel özellik değişiklikleri eklersiniz. Makine .exode dosyasına kaydedilir: React'te onu ExodeUICanvas ile yükler ve girişler aracılığıyla ve Swift'de ExodeUIController aracılığıyla çalıştırırsınız.
Üretim için uygulama örneği
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}