快捷導(dǎo)航

ComponentLoader?與動態(tài)組件實例詳解

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

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

引言

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

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

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

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

按組件 ID 加載

將組件樹上的某個組件渲染到任何地方，即一個組件實例渲染到 N 個地方，實例級別信息共享，渲染為 N 份：

<ComponentLoader componentId="input1" />

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

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

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

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

按組件樹路徑加載

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

<ComponentLoader treePath="children.0" />

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

動態(tài)組件

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

<ComponentLoader standalone componentName="card" />

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

之所以不需要指定 componentId，是因為每個 ComponentLoader 此時都是一個唯一的實例，在 designer 內(nèi)部會自動分配一個固定的組件 ID。

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

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

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

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

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

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

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

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

該方式渲染的組件元信息定義的 defaultProps、props 不會生效，因為不存在于組件樹中。
該組件無法通過 deleteComponent 刪除，也無法通過 setProps、setComponent 等修改，因為渲染完全由父組件控制，而不由組件樹控制。
不能用 setParent 改變這種組件的位置，因為其位置在代碼中被固定了。