---
name: jjb-cloud-component-basic-usage
description: 定义 JJB 云组件基础用法。在使用 CloudComponent 进行简单加载或带生命周期钩子时查阅。
---

# 云组件使用规范

## 基础用法

## 最简单的使用

```javascript
import React from 'react';
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';

function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      componentProps={{
        title: "Hello World",
        count: 42
      }}
    />
  );
}
```

## 带生命周期钩子的使用

```javascript
import React from 'react';
import CloudComponent from '@cqsjjb/jjb-cloud-component/CloudComponent';

function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      componentProps={{
        title: "Hello World",
        count: 42
      }}
      onLoadStart={() => {
        console.log('开始加载云组件');
      }}
      onLoadEnd={() => {
        console.log('云组件加载完成');
      }}
      onMounted={(key, ref) => {
        console.log(`组件 ${key} 已挂载`);
        // 可以调用组件方法
        ref.updateData?.({ theme: 'dark' });
      }}
      onUpdated={(key, ref) => {
        console.log(`组件 ${key} 已更新`, ref);
      }}
      onDestroy={() => {
        console.log('组件已销毁');
      }}
    />
  );
}
```