#การเรนเดอร์ FlowModel

FlowModelRenderer เป็นคอมโพเนนต์ React หลักที่ใช้สำหรับเรนเดอร์ FlowModel ครับ/ค่ะ โดยมีหน้าที่แปลงอินสแตนซ์ของ FlowModel ให้เป็นคอมโพเนนต์ React ที่แสดงผลได้

#การใช้งานพื้นฐาน

#FlowModelRenderer

import { FlowModelRenderer } from '@nocobase/flow-engine';

// การใช้งานพื้นฐาน
<FlowModelRenderer model={myModel} />

#FieldModelRenderer

สำหรับ Field Model ที่มีการควบคุม (controlled field Model) ให้ใช้ FieldModelRenderer ในการเรนเดอร์ครับ/ค่ะ:

import { FieldModelRenderer } from '@nocobase/flow-engine';

// การเรนเดอร์ฟิลด์แบบควบคุม
<FieldModelRenderer model={fieldModel} />

#พารามิเตอร์ Props

#FlowModelRendererProps

#การตั้งค่าโดยละเอียดของ showFlowSettings

เมื่อ showFlowSettings เป็นออบเจกต์ จะรองรับการตั้งค่าดังต่อไปนี้ครับ/ค่ะ:

showFlowSettings={{
  showBackground: true,    // แสดงพื้นหลัง
  showBorder: true,        // แสดงเส้นขอบ
  showDragHandle: true,    // แสดงตัวจับสำหรับลาก
  style: {},              // สไตล์แถบเครื่องมือที่กำหนดเอง
  toolbarPosition: 'inside' // ตำแหน่งแถบเครื่องมือ: 'inside' | 'above' | 'below'
}}

#วงจรชีวิตของการเรนเดอร์

วงจรชีวิตของการเรนเดอร์ทั้งหมดจะเรียกใช้เมธอดต่อไปนี้ตามลำดับครับ/ค่ะ:

1. model.dispatchEvent('beforeRender') - อีเวนต์ก่อนการเรนเดอร์ (beforeRender)
2. model.render() - เรียกใช้เมธอดเรนเดอร์ของ Model
3. model.onMount() - ฮุกเมื่อคอมโพเนนต์ถูกเมาท์ (mount)
4. model.onUnmount() - ฮุกเมื่อคอมโพเนนต์ถูกอันเมาท์ (unmount)

#ตัวอย่างการใช้งาน

#การเรนเดอร์พื้นฐาน

import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>กำลังโหลด...</div>}
    />
  );
}

#การเรนเดอร์พร้อมการตั้งค่าเวิร์กโฟลว์

// แสดงการตั้งค่าแต่ซ่อนปุ่มลบ
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// แสดงการตั้งค่าและชื่อเรื่อง
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// ใช้โหมดเมนูคลิกขวา
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

#แถบเครื่องมือที่กำหนดเอง

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'การดำเนินการที่กำหนดเอง',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('การดำเนินการที่กำหนดเอง');
      }
    }
  ]}
/>

#การข้ามเวิร์กโฟลว์อัตโนมัติ

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

#การเรนเดอร์ Field Model

import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

#การจัดการข้อผิดพลาด

FlowModelRenderer มีกลไกการจัดการข้อผิดพลาดที่สมบูรณ์แบบในตัวครับ/ค่ะ:

• ขอบเขตข้อผิดพลาดอัตโนมัติ (Automatic Error Boundary): เปิดใช้งาน showErrorFallback={true} โดยค่าเริ่มต้น
• ข้อผิดพลาดของเวิร์กโฟลว์อัตโนมัติ: ดักจับและจัดการข้อผิดพลาดที่เกิดขึ้นระหว่างการทำงานของเวิร์กโฟลว์อัตโนมัติ
• ข้อผิดพลาดในการเรนเดอร์: แสดงเนื้อหาสำรองเมื่อการเรนเดอร์ Model ล้มเหลว

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>การเรนเดอร์ล้มเหลว โปรดลองอีกครั้ง</div>}
/>

#การเพิ่มประสิทธิภาพ

#การข้ามเวิร์กโฟลว์อัตโนมัติ

สำหรับสถานการณ์ที่ไม่จำเป็นต้องใช้เวิร์กโฟลว์อัตโนมัติ คุณสามารถข้ามการทำงานส่วนนี้เพื่อเพิ่มประสิทธิภาพได้ครับ/ค่ะ:

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>

#การอัปเดตแบบ Reactive

FlowModelRenderer ใช้ observer จาก @formily/reactive-react สำหรับการอัปเดตแบบ Reactive เพื่อให้มั่นใจว่าคอมโพเนนต์จะเรนเดอร์ใหม่โดยอัตโนมัติเมื่อสถานะของ Model มีการเปลี่ยนแปลงครับ/ค่ะ

#ข้อควรทราบ

1. การตรวจสอบ Model: ตรวจสอบให้แน่ใจว่า model ที่ส่งเข้ามามีเมธอด render ที่ถูกต้อง
2. การจัดการวงจรชีวิต: ฮุกวงจรชีวิตของ Model จะถูกเรียกใช้ในเวลาที่เหมาะสม
3. ขอบเขตข้อผิดพลาด (Error Boundary): แนะนำให้เปิดใช้งานขอบเขตข้อผิดพลาดในสภาพแวดล้อมการใช้งานจริง (production environment) เพื่อมอบประสบการณ์ผู้ใช้ที่ดีขึ้น
4. ข้อควรพิจารณาด้านประสิทธิภาพ: สำหรับสถานการณ์ที่มีการเรนเดอร์ Model จำนวนมาก ควรพิจารณาใช้ตัวเลือก skipApplyAutoFlows ครับ/ค่ะ