共计 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。
这么设计非常灵活,但实现起来难度是有一些,次要留神两点:
- 动静组件不存在于组件树,但咱们之前设计在组件元信息的所有性能都要能够响应,这就要求框架代码不能依赖组件树产生作用,而是将所有组件独立存储计算,包含组件树上的,以及动静组件。
- 性能,独立组件加载器之间的执行并无关联,因为框架自身为响应式,为了避免频繁刷新或频繁计算须要设计一套主动批处理机制,相似 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
扭转这种组件的地位,因为其地位在代码中被固定了。
总结
其实 <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 许可证)