FlowModel vs React.Component

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

Tính năng/Năng lựcReact.ComponentFlowModel
Khả năng renderCó, phương thức render() sinh UICó, phương thức render() sinh UI
Quản lý trạng tháistatesetState tích hợpDùng props, nhưng quản lý trạng thái phụ thuộc nhiều hơn vào cấu trúc cây model
Vòng đờiCó, như componentDidMountCó, như onInit, onMount, onUnmount
Mục đíchXây dựng component UIXây dựng "cây model" được điều khiển bởi dữ liệu, luồng hóa, có cấu trúc
Cấu trúc dữ liệuCây componentCây model (hỗ trợ model cha-con, đa instance Fork)
Component conLồng component bằng JSXDùng setSubModel/addSubModel để thiết lập subModel tường minh
Hành vi độngGắn sự kiện, cập nhật trạng thái điều khiển UIĐăng ký/phát Flow, xử lý luồng tự động
Lưu trữKhông có cơ chế tích hợpHỗ trợ lưu trữ (như model.save())
Hỗ trợ Fork (render nhiều lần)Không (cần tái sử dụng thủ công)Có (đa instance hóa với createFork)
Kiểm soát 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ỏ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 component vs cây model

  • Cây component React: Cây render UI được hình thành bởi việc lồng JSX khi runtime.
  • Cây model FlowModel: Cây cấu trúc logic do FlowEngine quản lý, có thể lưu trữ, đăng ký và kiểm soát động subModel, phù hợp xây dựng các Block trang, luồng thao tác, model dữ liệu, v.v.

Chức năng đặc biệt (chỉ có ở FlowModel)

Chức năngMô tả
registerFlowĐăng ký Flow
applyFlow / dispatchEventThực thi/Kích hoạt Flow
setSubModel / addSubModelKiểm soát tường minh việc tạo và gắn subModel
createForkHỗ trợ một logic model được tái sử dụng render nhiều lần (như mỗi hàng của bảng)
openFlowSettingsCài đặt bước Flow
save / saveStepParams()Model có thể lưu trữ, kết nối với backend

Tóm tắt

MụcReact.ComponentFlowModel
Ngữ cảnh phù hợpTổ chức component tầng UIQuản lý luồng và Block được điều khiển bởi dữ liệu
Tư tưởng cốt lõiUI khai báoLuồng có cấu trúc được điều khiển bởi model
Cách quản lýReact kiểm soát vòng đờiFlowModel kiểm soát vòng đời và cấu trúc model
Ưu điểmHệ sinh thái và toolchain phong phúCấu trúc mạnh, luồng có thể lưu trữ, subModel có thể kiểm soát

FlowModel có thể dùng bổ sung với React: dùng React để render trong FlowModel, còn FlowEngine quản lý vòng đời và cấu trúc của nó.