快捷導(dǎo)航

ComponentLoader?與動(dòng)態(tài)組件實(shí)例詳解

更新時(shí)間：2023年05月08日 14:29:41 作者：黃子毅

這篇文章主要為大家介紹了ComponentLoader?與動(dòng)態(tài)組件實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

組件通過(guò) <Canvas /> 渲染在畫(huà)布上，內(nèi)容完全由組件樹(shù) componentTree 驅(qū)動(dòng)，但也有一些情況我們需要把某個(gè)組件實(shí)例渲染到組件樹(shù)之外，比如全屏、置頂?shù)葓?chǎng)景，甚至有些時(shí)候我們要渲染一個(gè)不在組件樹(shù)中的臨時(shí)組件，卻要擁有一系列畫(huà)布能力。

為了讓組件渲染更靈活，我們暴露出 <ComponentLoader> API:

import { createDesigner } from 'designer'
const { Designer, Canvas, ComponentLoader } = createDesigner()
const App = () => {
  return (
    <Designer componentTree={/** ... */}>
      <Canvas />
      {/** 任意位置，甚至 Canvas 的組件實(shí)例內(nèi)使用 ComponentLoader 加載任意組件 */}
      <ComponentLoader />
    </Designer>
  )
}

組件加載器有三種用法：按組件 ID 加載、按組件樹(shù)路徑加載、動(dòng)態(tài)組件，下面分別介紹。

按組件 ID 加載

將組件樹(shù)上的某個(gè)組件渲染到任何地方，即一個(gè)組件實(shí)例渲染到 N 個(gè)地方，實(shí)例級(jí)別信息共享，渲染為 N 份：

<ComponentLoader componentId="input1" />

如上例子，將組件 ID 為 input1 的組件渲染到目標(biāo)位置。

甚至可以在組件內(nèi)套組件，比如我們定義一個(gè)容器組件，內(nèi)置渲染 ID 為 input1 的子組件：

const container: ComponentMeta = {
  componentName: 'container',
  // 組件 props 會(huì)自動(dòng)注入 ComponentLoader
  element: ({ ComponentLoader, children }) => {
    return (
      <div>
        <ComponentLoader componentId="input1" />
        {children}
      </div>
    )
  }
}

當(dāng)該組件 ID 在組件樹(shù)中被移除時(shí)，<ComponentLoader componentId="input1" /> 返回 null。

按組件樹(shù)路徑加載

如果組件在組件樹(shù)上沒(méi)有 ID，或者你希望固定渲染某個(gè)位置的組件，而無(wú)論組件樹(shù)如何變化，那么就可以采用按組件樹(shù)路徑的加載模式，將 componentId 替換為 treePath 即可：

<ComponentLoader treePath="children.0" />

如上例子，渲染的是 componentTree 根節(jié)點(diǎn) children.0 位置的子組件，同樣，但組件不存在時(shí)返回 null。

動(dòng)態(tài)組件

如果要渲染一個(gè)不存在于組件樹(shù)的組件實(shí)例，還可以這么用 <ComponentLoader />:

<ComponentLoader standalone componentName="card" />

即添加 standalone 表示它為一個(gè) “孤立” 組件，即不存在于組件樹(shù)的組件，以及 componentName 指定組件名。

之所以不需要指定 componentId，是因?yàn)槊總€(gè) ComponentLoader 此時(shí)都是一個(gè)唯一的實(shí)例，在 designer 內(nèi)部會(huì)自動(dòng)分配一個(gè)固定的組件 ID。

這么設(shè)計(jì)非常靈活，但實(shí)現(xiàn)起來(lái)難度是有一些，主要注意兩點(diǎn)：

動(dòng)態(tài)組件不存在于組件樹(shù)，但我們之前設(shè)計(jì)在組件元信息的所有功能都要可以響應(yīng)，這就要求框架代碼不能依賴組件樹(shù)產(chǎn)生作用，而是將所有組件獨(dú)立存儲(chǔ)計(jì)算，包括組件樹(shù)上的，以及動(dòng)態(tài)組件。
性能，獨(dú)立組件加載器之間的執(zhí)行并無(wú)關(guān)聯(lián)，因?yàn)榭蚣鼙旧頌轫憫?yīng)式，為了防止頻繁刷新或頻繁計(jì)算需要設(shè)計(jì)一套自動(dòng)批處理機(jī)制，類似 React 自動(dòng) batch 的實(shí)現(xiàn)。

對(duì)于動(dòng)態(tài)組件，我們還可以傳遞更多參數(shù)：

<ComponentLoader standalone componentName="chart" props={{ color: 'red' }}>
  <button>click</button>
</ComponentLoader>

如上例子，我們傳了額外 props 屬性，以及一個(gè)子元素給 chart 組件實(shí)例。

特別的，如果傳遞了 componentId，可以將該動(dòng)態(tài)組件的 ID 固定下來(lái)，方便進(jìn)行聯(lián)動(dòng)：

<ComponentLoader standalone componentName="chart" componentId="abc" />

但動(dòng)態(tài)組件也有一些限制，如下：

該方式渲染的組件元信息定義的 defaultProps、props 不會(huì)生效，因?yàn)椴淮嬖谟诮M件樹(shù)中。
該組件無(wú)法通過(guò) deleteComponent 刪除，也無(wú)法通過(guò) setProps、setComponent 等修改，因?yàn)殇秩就耆筛附M件控制，而不由組件樹(shù)控制。
不能用 setParent 改變這種組件的位置，因?yàn)槠湮恢迷诖a中被固定了。