Quick BI 自定义组件开发 -- 第一篇 Lifecycle 接口的定义

一、LifeStyle 接口的定义

自定义组件本质上是一个对象，接口为

interface Lifecycle {bootstrap?: LifecycleBootstrap;mount?: LifecycleMount;unmount?: LifecycleUnmount;update?: LifecycleUpdate;
}

包含四个可选的属性(bootstrap、mount、unmount、update),每个属性对应一个生命周期的钩子函数。

二、每个生命周期钩子的解释

2.1 bootstrap?:LifecycleBootstrap

• 作用：在组件初始化或加载到 Quick BI 环境时调用，用于执行初始化任务，例如设置配置、获取初始数据或准备资源。
• 调用时机：组件加载的初始阶段，通常在挂载到 DOM 之前。
• 使用场景：设置默认属性、验证配置或连接数据源。

type LifecycleBootstrap = (props: WidgetProps) => Promise<void> | void;

props可能包含组件的配置或上下文，函数可以是异步的（返回 Promise），以支持 API 调用等操作。

2.2 mount?: LifecycleMount

• 作用：当组件被渲染或挂载到 DOM 时调用，用于执行与 UI 渲染或事件绑定相关的任务。
• 调用时机：组件初始化完成后，被添加到页面时。
• 使用场景：渲染组件的 HTML 结构、初始化图表（如 ECharts 或 D3）或绑定 DOM 事件。

type LifecycleMount = (props: WidgetProps) => Promise<void> | void;

2.3 unmount?: LifecycleUnmount

• 作用：当组件从 DOM 中移除或销毁时调用，用于清理任务，防止内存泄漏或资源占用。
• 调用时机：组件不再需要时，例如离开仪表板或移除组件。
• 使用场景：移除事件监听器、清除定时器或释放 WebSocket 连接等资源

通常不需要参数，专注于清理。

type LifecycleUnmount = () => Promise<void> | void;

2.4 update?: LifecycleUpdate

• 作用：当组件的属性或数据发生变化时调用，用于更新组件状态或重新渲染。
• 调用时机：组件接收到新的属性，例如数据更新或配置变化。
• 使用场景：用新数据重新渲染图表、更新显示值或调整组件布局。

type LifecycleUpdate = (props: WidgetProps) => Promise<void> | void;

三、为什么使用 LifeCycle 接口

• 控制组件初始化（bootstrap），确保正确设置。
• 动态渲染和更新 UI（mount 和 update），展示实时数据。
• 清理资源（unmount），提高性能并避免内存泄漏。
• 提高组件的可重用性和可维护性，遵循一致的生命周期模式。