logologo
Bắt đầu
Hướng dẫn
Phát triển
Plugin
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Bắt đầu
Hướng dẫn
Phát triển
Plugin
API
logologo

Giới thiệu

FlowEngine là gì?
Mối quan hệ giữa FlowEngine và plugin
Bắt đầu nhanh
Lộ trình học tập

Hướng dẫn

Đăng ký FlowModel
Tạo FlowModel
Render FlowModel
Luồng sự kiện và cấu hình FlowModel
Lưu trữ bền vững FlowModel
Vòng đời FlowModel
Hệ thống ngữ cảnh của FlowModel
Cơ chế phản ứng: Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageCơ chế phản ứng: Observable
Next PageModelDefinition
TIP

Tài liệu này được dịch bởi AI. Đối với bất kỳ thông tin không chính xác nào, vui lòng tham khảo phiên bản tiếng Anh

#FlowModel so với React.Component

#So sánh trách nhiệm cơ bản

Đặc điểm/Khả năngReact.ComponentFlowModel
Khả năng hiển thị (render)Có, phương thức render() tạo ra giao diện người dùng (UI)Có, phương thức render() tạo ra giao diện người dùng (UI)
Quản lý trạng tháistate và setState tích hợp sẵnSử dụng props, nhưng việc quản lý trạng thái phụ thuộc nhiều hơn vào cấu trúc cây mô hình
Vòng đờiCó, ví dụ như componentDidMountCó, ví dụ như onInit, onMount, onUnmount
Mục đích sử dụngXây dựng các thành phần UIXây dựng "cây mô hình" có cấu trúc, dựa trên dữ liệu và luồng
Cấu trúc dữ liệuCây thành phầnCây mô hình (hỗ trợ mô hình cha-con, Fork đa phiên bản)
Thành phần conSử dụng JSX để lồng các thành phầnSử dụng setSubModel/addSubModel để thiết lập rõ ràng các mô hình con
Hành vi độngLiên kết sự kiện, cập nhật trạng thái điều khiển UIĐăng ký/phân phối các luồng, xử lý các luồng tự động
Khả năng lưu trữ bền vữngKhông có cơ chế tích hợp sẵnHỗ trợ lưu trữ bền vững (ví dụ: model.save())
Hỗ trợ Fork (hiển thị nhiều lần)Không (cần tái sử dụng thủ công)Có (createFork để tạo nhiều phiên bản)
Kiểm soát bởi EngineKhôngCó, được FlowEngine quản lý, đăng ký và tải

#So sánh vòng đời

Hook vòng đờiReact.ComponentFlowModel
Khởi tạoconstructor, componentDidMountonInit, onMount
Hủy bỏ (Unmount)componentWillUnmountonUnmount
Phản hồi đầu vàocomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
Xử lý lỗicomponentDidCatchonAutoFlowsError

#So sánh cấu trúc xây dựng

React:

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

FlowModel:

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

#Cây thành phần so với Cây mô hình

  • Cây thành phần React: Là cây hiển thị giao diện người dùng (UI) được hình thành bởi các thành phần JSX lồng nhau trong thời gian chạy.
  • Cây mô hình FlowModel: Là cây cấu trúc logic được quản lý bởi FlowEngine, có khả năng lưu trữ bền vững, cho phép đăng ký động và kiểm soát các mô hình con. Phù hợp để xây dựng các khối trang, luồng thao tác, mô hình dữ liệu, v.v.

#Các tính năng đặc biệt (chỉ có ở FlowModel)

Chức năngMô tả
registerFlowĐăng ký luồng
applyFlow / dispatchEventThực thi/kích hoạt luồng
setSubModel / addSubModelKiểm soát rõ ràng việc tạo và liên kết các mô hình con
createForkHỗ trợ tái sử dụng logic của một mô hình để hiển thị nhiều lần (ví dụ: mỗi hàng trong bảng)
openFlowSettingsCài đặt bước luồng
save / saveStepParams()Mô hình có thể được lưu trữ bền vững và tích hợp với backend

#Tóm tắt

MụcReact.ComponentFlowModel
Các trường hợp phù hợpTổ chức thành phần lớp UIQuản lý luồng và khối dựa trên dữ liệu
Ý tưởng cốt lõiUI khai báoLuồng có cấu trúc dựa trên mô hình
Phương thức quản lýReact kiểm soát vòng đờiFlowModel kiểm soát vòng đời và cấu trúc của mô hình
Ưu điểmHệ sinh thái và bộ công cụ phong phúCấu trúc chặt chẽ, luồng có thể lưu trữ bền vững, mô hình con có thể kiểm soát

FlowModel có thể được sử dụng bổ trợ với React: Sử dụng React để hiển thị trong FlowModel, trong khi vòng đời và cấu trúc của nó được FlowEngine quản lý.