logologo
Başlangıç
Kılavuz
Geliştirme
Eklentiler
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Başlangıç
Kılavuz
Geliştirme
Eklentiler
API
logologo

Giriş

FlowEngine Nedir?
FlowEngine ve Eklenti İlişkisi
Hızlı Başlangıç
Öğrenme Yol Haritası

Kılavuz

FlowModel Kaydı
FlowModel Oluşturma
FlowModel İşleme
FlowModel Olay Akışı ve Yapılandırma
FlowModel Kalıcılığı
FlowModel Yaşam Döngüsü
FlowModel Bağlam Sistemi
Reaktif Mekanizma: Observable
FlowModel vs React.Component

Tanımlar

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageReaktif Mekanizma: Observable
Next PageModelDefinition
TIP

Bu belge AI tarafından çevrilmiştir. Herhangi bir yanlışlık için lütfen İngilizce sürümüne bakın

#FlowModel ve React.Component Karşılaştırması

#Temel Sorumlulukların Karşılaştırması

Özellik/YetenekReact.ComponentFlowModel
Render Etme YeteneğiEvet, render() metodu kullanıcı arayüzü (UI) oluşturur.Evet, render() metodu kullanıcı arayüzü (UI) oluşturur.
Durum YönetimiDahili state ve setStateprops kullanır, ancak durum yönetimi daha çok model ağacı yapısına dayanır.
Yaşam DöngüsüEvet, örneğin componentDidMountEvet, örneğin onInit, onMount, onUnmount
Kullanım AmacıUI bileşenleri oluşturmakVeri odaklı, akış tabanlı, yapılandırılmış "model ağaçları" oluşturmak
Veri YapısıBileşen ağacıModel ağacı (üst-alt modelleri, çoklu örnek çatallanmayı (Fork) destekler)
Alt BileşenlerJSX kullanarak bileşenleri iç içe yerleştirmeAlt modelleri açıkça setSubModel/addSubModel kullanarak ayarlama
Dinamik DavranışOlay bağlama, durum güncellemeleri UI'ı yönlendirirAkışları (Flow) kaydetme/gönderme, otomatik akışları işleme
KalıcılıkDahili bir mekanizma yokKalıcılığı destekler (örneğin model.save())
Çatallanmayı (Fork) Destekler (çoklu render)Hayır (manuel olarak yeniden kullanım gerektirir)Evet (createFork çoklu örnekleme için)
Motor KontrolüYokEvet, FlowEngine tarafından yönetilir, kaydedilir ve yüklenir

#Yaşam Döngüsü Karşılaştırması

Yaşam Döngüsü KancasıReact.ComponentFlowModel
Başlatmaconstructor, componentDidMountonInit, onMount
KaldırmacomponentWillUnmountonUnmount
Girdiye Yanıt VermecomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
Hata YönetimicomponentDidCatchonAutoFlowsError

#Yapı Oluşturma Karşılaştırması

React:

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

FlowModel:

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

#Bileşen Ağacı ve Model Ağacı

  • React Bileşen Ağacı: Çalışma zamanında JSX iç içe yerleştirme ile oluşan bir UI render ağacıdır.
  • FlowModel Model Ağacı: FlowEngine tarafından yönetilen, kalıcı hale getirilebilen, dinamik olarak kaydedilebilen ve alt modelleri kontrol edilebilen bir mantıksal yapı ağacıdır. Sayfa blokları, işlem akışları, veri modelleri vb. oluşturmak için uygundur.

#Özel Özellikler (FlowModel'e Özgü)

FonksiyonAçıklama
registerFlowAkış kaydetme
applyFlow / dispatchEventAkışı yürütme/tetikleme
setSubModel / addSubModelAlt modellerin oluşturulmasını ve bağlanmasını açıkça kontrol etme
createForkBir modelin mantığının birden çok kez yeniden kullanılmasını destekler (örneğin, bir tablodaki her satır için)
openFlowSettingsAkış adımı ayarları
save / saveStepParams()Model kalıcı hale getirilebilir ve arka uç ile entegre edilebilir

#Özet

ÖğeReact.ComponentFlowModel
Uygun SenaryolarUI katmanı bileşen organizasyonuVeri odaklı akış ve blok yönetimi
Temel FikirBildirimsel UIModel odaklı yapılandırılmış akış
Yönetim ŞekliReact yaşam döngüsünü kontrol ederFlowModel modelin yaşam döngüsünü ve yapısını kontrol eder
AvantajlarZengin ekosistem ve araç zinciriGüçlü yapılandırma, akışların kalıcı hale getirilebilirliği, alt modellerin kontrol edilebilirliği

FlowModel, React ile tamamlayıcı bir şekilde kullanılabilir: FlowModel içinde render işlemi için React'i kullanırken, yaşam döngüsü ve yapısı FlowEngine tarafından yönetilir.