FlowModel vs React.Component

Perbandingan Tanggung Jawab Dasar

Fitur/KemampuanReact.ComponentFlowModel
Kemampuan renderYa, metode render() menghasilkan UIYa, metode render() menghasilkan UI
Manajemen statestate dan setState bawaanMenggunakan props, tetapi manajemen state lebih bergantung pada struktur model tree
LifecycleYa, seperti componentDidMountYa, seperti onInit, onMount, onUnmount
TujuanMembangun komponen UIMembangun "model tree" yang data-driven, mengalir, dan terstruktur
Struktur dataComponent treeModel tree (mendukung parent-child model, multi-instance Fork)
Komponen anakMenggunakan nesting JSXMengatur sub-model secara eksplisit dengan setSubModel/addSubModel
Perilaku dinamisEvent binding, update state mendorong UIMendaftarkan/men-dispatch Flow, menangani auto flow
PersistensiTidak ada mekanisme bawaanMendukung persistensi (seperti model.save())
Mendukung Fork (render berkali-kali)Tidak (perlu reuse manual)Ya (createFork multi-instance)
Kontrol engineTidak adaYa, dikelola, didaftarkan, dan dimuat oleh FlowEngine

Perbandingan Lifecycle

Lifecycle HookReact.ComponentFlowModel
Inisialisasiconstructor, componentDidMountonInit, onMount
UnmountcomponentWillUnmountonUnmount
Respons inputcomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
Penanganan errorcomponentDidCatchonAutoFlowsError

Perbandingan Struktur Bangunan

React:

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

FlowModel:

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

Component Tree vs Model Tree

  • React Component Tree: UI render tree yang dibentuk oleh JSX nesting saat runtime.
  • FlowModel Model Tree: Pohon struktur logika yang dikelola oleh FlowEngine, dapat di-persisten, didaftarkan secara dinamis dan mengontrol sub-model. Cocok untuk membangun page block, action flow, model data, dan sebagainya.

Fitur Khusus (Khusus FlowModel)

FiturDeskripsi
registerFlowMendaftarkan Flow
applyFlow / dispatchEventMengeksekusi/memicu Flow
setSubModel / addSubModelMengontrol secara eksplisit pembuatan dan binding sub-model
createForkMendukung satu model logic yang di-reuse render berkali-kali (seperti setiap baris tabel)
openFlowSettingsPengaturan Flow Step
save / saveStepParams()Model dapat di-persisten, terhubung dengan backend

Ringkasan

ItemReact.ComponentFlowModel
Skenario cocokOrganisasi komponen layer UIManajemen Flow dan Block yang data-driven
Ide intiUI deklaratifFlow terstruktur yang model-driven
Cara manajemenReact mengontrol lifecycleFlowModel mengontrol lifecycle dan struktur model
KeunggulanEkosistem dan toolchain yang kayaSangat terstruktur, Flow dapat di-persisten, sub-model dapat dikontrol

FlowModel dapat digunakan secara saling melengkapi dengan React: menggunakan render React di dalam FlowModel, sementara FlowEngine mengelola lifecycle dan strukturnya.