关于前端:ComponentLoader-与动态组件

48次阅读

共计 2276 个字符,预计需要花费 6 分钟才能阅读完成。

组件通过 <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。

这么设计非常灵活,但实现起来难度是有一些,次要留神两点:

  1. 动静组件不存在于组件树,但咱们之前设计在组件元信息的所有性能都要能够响应,这就要求框架代码不能依赖组件树产生作用,而是将所有组件独立存储计算,包含组件树上的,以及动静组件。
  2. 性能,独立组件加载器之间的执行并无关联,因为框架自身为响应式,为了避免频繁刷新或频繁计算须要设计一套主动批处理机制,相似 React 主动 batch 的实现。

对于动静组件,咱们还能够传递更多参数:

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

如上例子,咱们传了额定 props 属性,以及一个子元素给 chart 组件实例。

特地的,如果传递了 componentId,能够将该动静组件的 ID 固定下来,不便进行联动:

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

但动静组件也有一些限度,如下:

  • 该形式渲染的组件元信息定义的 defaultPropsprops 不会失效,因为不存在于组件树中。
  • 该组件无奈通过 deleteComponent 删除,也无奈通过 setPropssetComponent 等批改,因为渲染齐全由父组件管制,而不禁组件树管制。
  • 不能用 setParent 扭转这种组件的地位,因为其地位在代码中被固定了。

总结

其实 <Canvas /> 根节点实质上等价于 <ComponentLoader treePath="" />,即从根节点开始渲染一个组件实例。

所以提供 ComponentLoader 势必会让业务能力更灵便,在任意地位渲染组件,甚至渲染一个不存在于组件树的动静组件。

探讨地址是:精读《ComponentLoader 与动静组件》· Issue #482 · dt-fe/weekly

如果你想参加探讨,请 点击这里,每周都有新的主题,周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>

版权申明:自在转载 - 非商用 - 非衍生 - 放弃署名(创意共享 3.0 许可证)

正文完
 0