واجهة مستخدم جهاز الحالة: بناء واجهات حتمية وخالية من الأخطاء
تعرف على كيفية قيام أجهزة الحالة المرئية بإزالة حالات واجهة المستخدم المستحيلة، وتبسيط المكونات التفاعلية المعقدة، وإنشاء واجهات حتمية خالية من الأخطاء في React.
الوجبات الجاهزة الأساسية
آلة حالة واجهة المستخدم هي نموذج رياضي يصف جميع الحالات الصالحة التي يمكن أن يشغلها مكون الواجهة، والانتقالات الصريحة بين تلك الحالات التي يتم تشغيلها بواسطة أحداث المستخدم أو ظروف النظام. تعمل أجهزة الحالة على التخلص من فئات كاملة من أخطاء واجهة المستخدم عن طريق جعل "الحالات المستحيلة مستحيلة" - لا يمكن أن يظهر قرص التحميل وعلامة اختيار النجاح معًا في وقت واحد إذا كانت آلة الحالة لديك تحظر هذه المجموعة.
آلات حالة المشكلة تحل
تنشأ معظم أخطاء واجهة المستخدم من مكونات يمكنها الدخول في حالات مستحيلة منطقيًا. مثال كلاسيكي: يمكن أن يكون زر إرسال النموذج الذي لا يحتوي على نموذج حالة صريح في حالة "تحميل" وحالة "معطل" في نفس الوقت من علامتين منطقيتين منفصلتين. تمنع آلة الحالة ذلك من خلال اشتراط أن يكون المكون دائمًا في حالة واحدة محددة جيدًا في أي لحظة.
- "جحيم العلم المنطقي" - isLoading، isDisabled، isError، isSuccess كلها متعارضة
- ظروف السباق حيث يقوم المستخدمون السريعون بتشغيل حالات متعددة في وقت واحد
- أخطاء الانتقال حيث تبدأ الرسوم المتحركة من مواضع متوسطة غير صحيحة
- الحمل المعرفي للمطور من تتبع مجموعات علامات n × n في مراجعة التعليمات البرمجية
مفاهيم آلة الدولة الأساسية
تتكون آلات الحالة من مجموعة محدودة من الحالات، ومفردات من الأحداث التي يمكن أن تؤدي إلى التحولات، وشروط الحماية التي تحدد ما إذا كان التحول مسموحًا به.
الدول
تمثل كل حالة حالة معينة للمكون. مثال لمكون جلب البيانات: خامل، جارٍ التحميل، نجاح، خطأ، تحديث.
الأحداث / التحولات
الأحداث تؤدي إلى تغييرات الحالة. "إرسال" ينقل النموذج من الخمول إلى التحميل. "النجاح" ينتقل من التحميل إلى النجاح. "خطأ" ينتقل من التحميل إلى الخطأ.
حراس
الشروط التي يجب أن تكون صحيحة للانتقال إلى النار. يمكن أن يؤدي حدث "SUBMIT" إلى تشغيل انتقال الخمول → التحميل فقط في حالة مرور حارس التحقق من صحة النموذج.
السياق / الحالة الموسعة
البيانات المساعدة التي يحملها الجهاز (قيم إدخال المستخدم، رسائل الخطأ، البيانات المحملة) بجانب اسم الحالة الحالية.
آلات الدولة في ExodeUI
يوفر ExodeUI محررًا مرئيًا لحالة الرسم البياني للعقدة. يمكنك رسم الحالات كدوائر، وربطها بأسهم تحمل علامات تمثل الأحداث، وإرفاق الرسوم المتحركة الربيعية وتغييرات الخصائص المرئية بكل حالة. يتم حفظ الجهاز في ملف .exode: في React، يمكنك تحميله باستخدام ExodeUICanvas وقيادته عبر المدخلات، وفي Swift عبر ExodeUIController.
مقتطف من تنفيذ الإنتاج
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)}
/>
);
}