# 占位組件

基礎(chǔ)庫 2.11.2 及以上版本支持，2.11.2 以下和未配置的效果相同

在使用如 分包異步化 或 用時(shí)注入 等特性時(shí)，自定義組件所引用的其他自定義組件，在剛開始進(jìn)行渲染時(shí)可能處于不可用的狀態(tài)。此時(shí)，為了使渲染過程不被阻塞，不可用的自定義組件需要一個(gè) 「占位組件」（Component placeholder）。基礎(chǔ)庫會用占位組件替代不可用組件進(jìn)行渲染，在該組件可用后再將占位組件替換回該組件。

一個(gè)自定義組件的占位組件可以是另一個(gè)自定義組件、或一個(gè)內(nèi)置組件。

# 配置

頁面或自定義組件對應(yīng)的 JSON 配置中的 componentPlaceholder 字段用于指定占位組件，如：

{
  "usingComponents": {
    "comp-a": "../comp/compA",
    "comp-b": "../comp/compB",
    "comp-c": "../comp/compC"
  },
  "componentPlaceholder": {
    "comp-a": "view",
    "comp-b": "comp-c"
  }
}

該配置表示：

• 組件 comp-a 的占位組件為內(nèi)置組件 view
• 組件 comp-b 的占位組件為自定義組件 comp-c（其路徑在 usingComponents 中配置）

假設(shè)該配置對應(yīng)的模板如下：

<button ontap="onTap">顯示組件</button>
<comp-a wx-if="{{ visible }}">
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

小程序啟動時(shí) visible 為 false，那么只有 button 會被渲染；點(diǎn)擊按鈕后，this.setData({ visible: true }) 被執(zhí)行，此時(shí)如果 comp-a, comp-b 均不可用，則頁面將被渲染為：

<button>顯示組件</button>
<view>
  <comp-c prop="{{ p }}">text in slot</comp-c>
</view>

comp-a 與 comp-b 準(zhǔn)備完成后，頁面被替換為：

<button>顯示組件</button>
<comp-a>
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

# 注意事項(xiàng)

1. 當(dāng)一個(gè)組件被指定為占位組件時(shí)（如上例中的 comp-c），為其指定占位組件是無效的?？梢岳斫鉃槿绻粋€(gè)組件需要作為其他組件的占位組件，則它必須在一開始就是可用的；
2. 目前自定義組件不可用的情況包括：
   • 使用分包異步化特性的情況下，引用了其他分包的組件，而對應(yīng)分包還未下載；
   • 使用用時(shí)注入特性的情況下，該組件還未注入；
3. 如果一個(gè)組件不可用，且其占位組件不存在，則渲染時(shí)會報(bào)錯(cuò)并拋出；
4. 如果一個(gè)組件不存在，但為其指定了可用的占位組件，則占位組件可以被正常渲染，但后續(xù)嘗試準(zhǔn)備替換時(shí)會報(bào)錯(cuò)并拋出。

# 附：有占位組件參與的渲染流程

基礎(chǔ)庫嘗試渲染一個(gè)組件時(shí)，會首先遞歸檢查 usingComponents，收集其將使用到的所有組件的信息；在這個(gè)過程中，如果某個(gè)被使用到的組件不可用，基礎(chǔ)庫會先檢查其是否有對應(yīng)的占位組件。如果沒有，基礎(chǔ)庫會中斷渲染并拋出錯(cuò)誤；如果有，則會標(biāo)記并在后續(xù)渲染流程中使用占位組件替換該不可用的組件進(jìn)行渲染。不可用的組件會在當(dāng)前渲染流程結(jié)束后嘗試準(zhǔn)備（下載分包或注入代碼等）；等到準(zhǔn)備過程完成后，再嘗試渲染該組件（實(shí)際上也是在執(zhí)行這個(gè)流程），并替換掉之前渲染的占位組件。