---
name: jjb-cloud-component-advanced
description: 定义 JJB 云组件高级用法。在使用 componentRef、initialize、headers、cache 策略时查阅。
---

# 云组件使用规范

## 高级用法

## 使用 componentRef

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

function MyPage() {
  const componentRef = React.useRef();

  const handleUpdate = () => {
    // 通过 ref 调用组件方法
    componentRef.current?.updateData?.(
      { theme: 'light' },
      { items: [4, 5, 6] }
    );
  };

  return (
    <>
      <Button onClick={handleUpdate}>更新组件数据</Button>
      <CloudComponent
        from="https://example.com/my-component.js"
        componentKey="my-component"
        componentRef={componentRef}
      />
    </>
  );
}
```

## 使用 initialize

当 `initialize` 为 `true` 时，组件会在挂载时自动调用 `updateData` 方法初始化 settings 和 dataSource：

```javascript
function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      initialize={true}
      componentProps={{
        settings: { theme: 'dark' },
        dataSource: { items: [] }
      }}
    />
  );
}
```

## 使用 headers（需要认证的资源）

```javascript
function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      headers={{
        'Authorization': 'Bearer token123',
        'X-Custom-Header': 'value'
      }}
    />
  );
}
```

## 使用 cache 策略

```javascript
function MyPage() {
  return (
    <CloudComponent
      from="https://example.com/my-component.js"
      componentKey="my-component"
      cache="no-cache" // 不使用缓存，每次都重新加载
    />
  );
}
```