ComponentLoader 与动态组件

黄子毅

发布于 2023-09-01 09:14:59

1180

发布于 2023-09-01 09:14:59

文章被收录于专栏：前端精读评论

组件通过 <Canvas /> 渲染在画布上，内容完全由组件树 componentTree 驱动，但也有一些情况我们需要把某个组件实例渲染到组件树之外，比如全屏、置顶等场景，甚至有些时候我们要渲染一个不在组件树中的临时组件，却要拥有一系列画布能力。

为了让组件渲染更灵活，我们暴露出 <ComponentLoader> API:

import { createDesigner } from 'designer'

const { Designer, Canvas, ComponentLoader } = createDesigner()

const App = () => {
  return (
    <Designer componentTree={/** ... */}>
      <Canvas />
      {/** 任意位置，甚至 Canvas 的组件实例内使用 ComponentLoader 加载任意组件 */}
      <ComponentLoader />
    </Designer>
  )
}

组件加载器有三种用法：按组件 ID 加载、按组件树路径加载、动态组件，下面分别介绍。

按组件 ID 加载

将组件树上的某个组件渲染到任何地方，即一个组件实例渲染到 N 个地方，实例级别信息共享，渲染为 N 份：

<ComponentLoader componentId="input1" />

如上例子，将组件 ID 为 input1 的组件渲染到目标位置。

甚至可以在组件内套组件，比如我们定义一个容器组件，内置渲染 ID 为 input1 的子组件：

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

当该组件 ID 在组件树中被移除时，<ComponentLoader componentId="input1" /> 返回 null。

按组件树路径加载

如果组件在组件树上没有 ID，或者你希望固定渲染某个位置的组件，而无论组件树如何变化，那么就可以采用按组件树路径的加载模式，将 componentId 替换为 treePath 即可：

<ComponentLoader treePath="children.0" />

如上例子，渲染的是 componentTree 根节点 children.0 位置的子组件，同样，但组件不存在时返回 null。

动态组件

如果要渲染一个不存在于组件树的组件实例，还可以这么用 <ComponentLoader />:

<ComponentLoader standalone componentName="card" />

即添加 standalone 表示它为一个 “孤立” 组件，即不存在于组件树的组件，以及 componentName 指定组件名。

之所以不需要指定 componentId，是因为每个 ComponentLoader 此时都是一个唯一的实例，在 designer 内部会自动分配一个固定的组件 ID。

这么设计非常灵活，但实现起来难度是有一些，主要注意两点：

动态组件不存在于组件树，但我们之前设计在组件元信息的所有功能都要可以响应，这就要求框架代码不能依赖组件树产生作用，而是将所有组件独立存储计算，包括组件树上的，以及动态组件。
性能，独立组件加载器之间的执行并无关联，因为框架本身为响应式，为了防止频繁刷新或频繁计算需要设计一套自动批处理机制，类似 React 自动 batch 的实现。

对于动态组件，我们还可以传递更多参数：

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

如上例子，我们传了额外 props 属性，以及一个子元素给 chart 组件实例。

特别的，如果传递了 componentId，可以将该动态组件的 ID 固定下来，方便进行联动：

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

但动态组件也有一些限制，如下：

该方式渲染的组件元信息定义的 defaultProps、props 不会生效，因为不存在于组件树中。
该组件无法通过 deleteComponent 删除，也无法通过 setProps、setComponent 等修改，因为渲染完全由父组件控制，而不由组件树控制。
不能用 setParent 改变这种组件的位置，因为其位置在代码中被固定了。