代码拉取完成,页面将自动刷新
本示例是全局自定义组件复用实现的示例代码,主要讲解如何通过BuilderNode创建全局的自定义组件复用池,实现跨页面的组件复用。
使用说明
使用List+Swiper实现Tabs页面切换,详细代码请参考BuilderNodePoolDemo.ets。
...
Swiper(this.swiperController) {
LazyForEach(this.array, () => {
TabNode()
}, (title: string) => title)
}
...
继承NodeController,实现makeNode,用于组件的创建或刷新,并在组件隐藏时(aboutToDisappear)回收组件,详细代码请参考BuilderNodePool.ets中的NodeItem实现。
export class NodeItem extends NodeController {
private callback: UpdaterCallback | null = null;
...
// 父类方法,用于创建子组件
makeNode(uiContext: UIContext): FrameNode | null {
if (!this.node) {
this.node = new BuilderNode(uiContext);
this.node.build(this.builder, this.data);
} else {
this.node.update(this.data);
this.update(this.data);
}
return this.node.getFrameNode();
}
// 组件隐藏时回收组件
aboutToDisappear(): void {
NodePool.getInstance().recycleNode(this.type, this);
}
...
}
使用单例模式实现复用池,应用内统一管理组件复用。添加getNode方法,根据传入的type参数,获取对应的Node组件,如果未找到,则重新创建,实现recycleNode方法,回收Node组件,详细代码请参考BuilderNodePool.ets中的NodePool实现。
...
export class NodePool {
private static instance: NodePool;
...
private constructor() {
this.nodePool = new HashMap();
this.nodeHook = new HashSet();
this.idGen = 0;
}
// 单例模式,可以全局统一管理
public static getInstance() {
if (!NodePool.instance) {
NodePool.instance = new NodePool();
}
return NodePool.instance;
}
...
public getNode(type: string, data: ESObject, builder: WrappedBuilder<ESObject>): NodeItem | undefined {
let node: NodeItem | undefined = this.nodePool.get(type)?.pop();
if (!node) {
node = new NodeItem(builder, data, type);
this.nodeHook.add(node);
} else {
node.data = data;
}
node.data.callback = (callback: UpdaterCallback) => {
if (node) {
node.registerUpdater(callback);
}
}
return node;
}
// 回收Node组件,提供给下次复用
public recycleNode(type: string, node: NodeItem) {
let nodeArray: Array<NodeItem> = this.nodePool.get(type);
if (!nodeArray) {
nodeArray = new Array();
this.nodePool.set(type, nodeArray);
}
nodeArray.push(node);
}
}
...
使用NodeContainer占位轮播图组件和瀑布流子组件的位置,并通过NodePool获取组件加载到页面中,详细代码请参考TabNode.ets。
...
FlowItem() {
NodeContainer(NodePool.getInstance().getNode('reuse_type_', {
item: item,
itemHeight: this.itemHeightArray[index % 100],
itemColor: this.colors[index % 5],
updater: (item: ViewItem) => {
this.fillNewData(item);
},
callback: null
}, flowItemWrapper))
}
...
通过BuilderNode实现全局自定义组件复用池,解决常规复用中只能在父组件中复用的问题,实现组件的跨父组件、跨页面复用,减少页面的创建耗时,优化应用性能。
customreusablepool // har类型
|---constants // 常量
|---|---Constants.ets // 常量类
|---data // 数据类型
|---|---MockData.ets // 模拟数据
|---|---TitleBean.ets // 标题类
|---|---TitleDataSource.ets // 标题懒加载数据类
|---|---ViewItem.ets // 瀑布流子组件数据类
|---|---WaterFlowDataSource.ets // 瀑布流子组件懒加载数据类
|---pages // 页面
|---|---BuilderNodePoolDemo.ets // 全局自定义组件复用池页面
|---utils // 工具类
|---|---BuilderNodePool.ets // 自定义组件复用池
|---view // 组件
|---|---FlowItemNode.ets // 自定义组件复用池的瀑布流子组件
|---|---TabNode.ets // 自定义组件复用池的Swiper页面
|---|---TitleView.ets // 标题View
|---|---SwiperView.ets // 瀑布流中的轮播图
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。