logologo
התחלה
מדריך
פיתוח
תוסף
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
התחלה
מדריך
פיתוח
תוסף
API
logologo

מבוא

מהו FlowEngine?
FlowEngine והקשר ל-Plugin
התחלה מהירה
מפת דרכים ללמידה

מדריך

רישום FlowModel
יצירת FlowModel
רינדור FlowModel
FlowModel: זרימת אירועים וקונפיגורציה
FlowModel Persistence
FlowModel Lifecycle
מערכת הקונטקסט של FlowModel
מנגנון ריאקטיבי: Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous Pageמנגנון ריאקטיבי: Observable
Next PageModelDefinition
TIP

מסמך זה תורגם על ידי בינה מלאכותית. לכל אי דיוק, אנא עיין בגרסה האנגלית

#FlowModel מול React.Component

#השוואת תחומי אחריות בסיסיים

מאפיין/יכולתReact.ComponentFlowModel
יכולת רינדורכן, מתודת render() מייצרת ממשק משתמש (UI)כן, מתודת render() מייצרת ממשק משתמש (UI)
ניהול מצבstate ו-setState מובניםמשתמש ב-props, אך ניהול המצב מסתמך יותר על מבנה עץ המודלים
מחזור חייםכן, למשל componentDidMountכן, למשל onInit, onMount, onUnmount
מטרהבניית רכיבי ממשק משתמש (UI)בניית "עצי מודלים" מונחי-נתונים, מבוססי-זרימה ומובנים
מבנה נתוניםעץ רכיביםעץ מודלים (תומך במודלי אב-בן, פיצול מרובה מופעים)
רכיבי ילדשימוש ב-JSX לקינון רכיביםשימוש ב-setSubModel/addSubModel להגדרה מפורשת של תת-מודלים
התנהגות דינמיתקשירת אירועים, עדכוני מצב מניעים את ה-UIרישום/שיגור זרימות (Flows), טיפול בזרימות אוטומטיות
שמירה (Persistence)אין מנגנון מובנהתומך בשמירה (persistence) (למשל, model.save())
תומך ב-Fork (רינדורים מרובים)לא (דורש שימוש חוזר ידני)כן (createFork ליצירת מופעים מרובים)
בקרת מנועאיןכן, מנוהל, נרשם ונטען על ידי FlowEngine

#השוואת מחזור חיים

וו מחזור חייםReact.ComponentFlowModel
אתחולconstructor, componentDidMountonInit, onMount
הסרהcomponentWillUnmountonUnmount
תגובה לקלטcomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
טיפול בשגיאותcomponentDidCatchonAutoFlowsError

#השוואת מבנה בנייה

React:

class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

FlowModel:

class HelloModel extends FlowModel {
  render() {
    return <div>Hello</div>;
  }
}

#עץ רכיבים מול עץ מודלים

  • עץ רכיבי React: עץ רינדור UI הנוצר על ידי קינון JSX בזמן ריצה.
  • עץ מודלי FlowModel: עץ מבנה לוגי המנוהל על ידי FlowEngine, הניתן לשמירה (persistence), ומאפשר רישום ובקרה דינמיים של תת-מודלים. מתאים לבניית בלוקים של עמודים, זרימות פעולה, מודלי נתונים ועוד.

#תכונות מיוחדות (ייחודיות ל-FlowModel)

פונקציהתיאור
registerFlowרישום זרימה (flow)
applyFlow / dispatchEventביצוע/הפעלת זרימה (flow)
setSubModel / addSubModelשליטה מפורשת על יצירה וקשירה של תת-מודלים
createForkתומך בשימוש חוזר בלוגיקה של מודל עבור רינדורים מרובים (למשל, כל שורה בטבלה)
openFlowSettingsהגדרות שלבי זרימה (flow)
save / saveStepParams()המודל ניתן לשמירה (persistence) ואינטגרציה עם ה-backend

#סיכום

פריטReact.ComponentFlowModel
תרחישי שימוש מתאימיםארגון רכיבי שכבת UIניהול זרימות (flows) ובלוקים מונחי-נתונים
רעיון ליבהUI הצהרתיזרימה (flow) מובנית מונחית-מודל
שיטת ניהולReact שולט במחזור החייםFlowModel שולט במחזור החיים ובמבנה של המודל
יתרונותאקוסיסטם עשיר ושרשרת כליםמובנה היטב, זרימות (flows) ניתנות לשמירה (persistence), תת-מודלים ניתנים לשליטה

FlowModel יכול לשמש כהשלמה ל-React: השתמשו ב-React לרינדור בתוך FlowModel, בעוד שמחזור החיים והמבנה שלו מנוהלים על ידי FlowEngine.