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 परसिस्टेंस
FlowModel लाइफसाइकिल
FlowModel कॉन्टेक्स्ट सिस्टम
रिएक्टिव मैकेनिज्म: Observable
FlowModel बनाम React.Component

डेफिनेशंस

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous Pageरिएक्टिव मैकेनिज्म: Observable
Next PageModelDefinition
TIP

यह दस्तावेज़ AI द्वारा अनुवादित किया गया है। किसी भी अशुद्धि के लिए, कृपया अंग्रेजी संस्करण देखें

#FlowModel बनाम React.Component

#बुनियादी जिम्मेदारियों की तुलना

विशेषता/क्षमताReact.ComponentFlowModel
रेंडरिंग क्षमताहाँ, render() विधि UI बनाती हैहाँ, render() विधि UI बनाती है
स्टेट मैनेजमेंटइनबिल्ट state और setStateयह props का उपयोग करता है, लेकिन स्टेट मैनेजमेंट मॉडल ट्री संरचना पर अधिक निर्भर करता है
लाइफसाइकिलहाँ, जैसे componentDidMountहाँ, जैसे onInit, onMount, onUnmount
उद्देश्यUI कंपोनेंट बनानाडेटा-ड्रिवन, फ्लो-आधारित, संरचित "मॉडल ट्री" बनाना
डेटा संरचनाकंपोनेंट ट्रीमॉडल ट्री (पैरेंट-चाइल्ड मॉडल, मल्टी-इंस्टेंस फोर्क को सपोर्ट करता है)
चाइल्ड कंपोनेंटJSX का उपयोग करके कंपोनेंट को नेस्ट करनाचाइल्ड मॉडल को स्पष्ट रूप से सेट करने के लिए setSubModel/addSubModel का उपयोग करना
डायनामिक व्यवहारइवेंट बाइंडिंग, स्टेट अपडेट UI को ड्राइव करते हैंफ्लो को रजिस्टर/डिस्पैच करना, ऑटोमैटिक फ्लो को हैंडल करना
परसिस्टेंसकोई इनबिल्ट मैकेनिज्म नहींपरसिस्टेंस को सपोर्ट करता है (जैसे model.save())
फोर्क को सपोर्ट करता है (मल्टीपल रेंडरिंग)नहीं (मैन्युअल रियूज़ की आवश्यकता है)हाँ (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 कंपोनेंट ट्री: रनटाइम पर नेस्टेड JSX द्वारा बनाई गई एक UI रेंडरिंग ट्री।
  • FlowModel मॉडल ट्री: FlowEngine द्वारा प्रबंधित एक लॉजिकल स्ट्रक्चर ट्री, जिसे परसिस्ट किया जा सकता है, और चाइल्ड मॉडल के डायनामिक रजिस्ट्रेशन और कंट्रोल की अनुमति देता है। यह पेज ब्लॉक, एक्शन फ्लो, डेटा मॉडल आदि बनाने के लिए उपयुक्त है।

#विशेष सुविधाएँ (FlowModel विशिष्ट)

फ़ंक्शनविवरण
registerFlowफ्लो रजिस्टर करें
applyFlow / dispatchEventफ्लो को निष्पादित/ट्रिगर करें
setSubModel / addSubModelचाइल्ड मॉडल के निर्माण और बाइंडिंग को स्पष्ट रूप से कंट्रोल करें
createForkएक मॉडल के लॉजिक को कई बार रेंडर करने के लिए रियूज़ करने को सपोर्ट करता है (जैसे टेबल में प्रत्येक पंक्ति)
openFlowSettingsफ्लो स्टेप सेटिंग्स
save / saveStepParams()मॉडल को परसिस्ट किया जा सकता है, और यह बैकएंड के साथ इंटीग्रेटेड होता है

#सारांश

आइटमReact.ComponentFlowModel
उपयुक्त परिदृश्यUI लेयर कंपोनेंट संगठनडेटा-ड्रिवन फ्लो और ब्लॉक मैनेजमेंट
मुख्य विचारडिक्लेरेटिव UIमॉडल-ड्रिवन संरचित फ्लो
प्रबंधन विधिReact लाइफसाइकिल को कंट्रोल करता हैFlowModel मॉडल की लाइफसाइकिल और संरचना को कंट्रोल करता है
फायदेसमृद्ध इकोसिस्टम और टूलचेनमजबूत संरचित, फ्लो को परसिस्ट किया जा सकता है, चाइल्ड मॉडल नियंत्रणीय हैं

FlowModel को React के साथ पूरक रूप से उपयोग किया जा सकता है: FlowModel के भीतर रेंडरिंग के लिए React का उपयोग करें, जबकि इसकी लाइफसाइकिल और संरचना FlowEngine द्वारा प्रबंधित की जाती है।