首页 > 其他分享 >[干货]在纯血鸿蒙星河版next中组件封装方法--看我就够了

[干货]在纯血鸿蒙星河版next中组件封装方法--看我就够了

时间:2024-06-01 21:59:51浏览次数:22  
标签:封装 渲染 -- 星河 next 参数 组件 UI 就是

首先组件封装一般是为了解决两个问题,复用和一定程度上提高维护性,组件的本质就是一个接受参数返回UI的函数容器,所以封装的重点和难点就是抽象合适的参数类型返回合适的UI,接下来我来给家人们说说封装组件的一般方法

封装组件的一般方法呢有两种,思想家人们掌握之后往上套就行了,我今天给家人们讲两种方式,一种呢叫做自顶向下,另外一种呢叫做自底向上

那怎么来理解呢?

1. 自顶向下:

自顶向上就是我先把组件的api参数都先设计好

1,先设计组件的api参数,就是说它到底接收哪些参数的传入,每个参数到底时props还是回调还是Slot插槽,我们先设计好,那接着呢我们根据这个参数反推它的逻辑

2,然后呢根据我们的参数设计,去实现我们的逻辑代码

就是说你看到一个需求你就在心里面有个大概的构想出来,它的所有api,哪个往哪种类型参数上去靠,就应该搞定了哈

2. 自底向上:

如果自底向下这种方式呢你搞不定的话我们可以采取另外一种,这种方式就非常常规了哈

1,就是我们先实现所有的功能,先在一个组件中不考虑可扩展性,先实现基础的核心功能,

2,第二步呢,我在功能已经实现的基础上再想,哎嘿这个参数有可能用户用的时候呀我既然写死了他不太方便,那我就把他变成参数,那这块模板将来呢好像也不能写死了,那你就再把它变成参数,那有的地方我需要通知一下父组件,ok那再变成参数,

总结来说就是:就是那些可变的东西需要定制的我们把它抽象成参数就可以了。

具体抽象成参数呢我们已经说过了哈,他的类到底往哪个类型上去靠,就完事了哈

以上两种就是封装组件的一般方法。

刚开始的时候,可以先采用第二种方式,先把组件的所有功能再组件内部写好,然后思考哪些地方可能是需要变化的,然后去参数表里找一下,看看适合抽象为哪个参数

组件参数根据使用场景可以分成以下几类:props/回调函数/builder,不同参数适合不同的场景

参数类型

使用场景

props

传递常见的数据类型,string/number/object/Array,要让组件显示的商品列表,控制组件单元是否显示的条件等等

回调函数

想要通知父组件做事情,想要把组件内部的参数抛出去给父组件使用,大家常说的子传父

builder

传递不同的UI结构,重点传递的是UI模版,也就是组件标签组成的东西

给家人们拓展一下无状态组件封装、无渲染组件封装、和常规组件的封装

一般组件封装无非分为三种,一种无状态组件的封装,一种无渲染组件封装,一种常规组件的封装

首先无状态组件又称为UI组件或者木偶组件,指的是这类组件主要是用作UI显示,你给我传什么,我就显示什么,最常见的就是各种数据列表

然后就是无渲染组件的封装,无渲染组件指的是这类组件本身没有后自己要渲染的东西,它的目的是为了复用逻辑,具体业务要使用这个逻辑干嘛,它是不做要求的

比如用来检测当前是横竖屏的组件,这里检测横竖屏就是可以复用的逻辑,不管在任何的其他地方,只要想用这个横竖屏去做业务,既可以使用这个组件,使用我们把UI部分封装成了builder参数,由具体的业务方决定要做什么事儿,组件只管把横竖屏状态传出去

接着是常规组件的封装,有些组件,我们可能需要结合不同参数实现组件功能,也是业务开发里最常见的一类组件

标签:封装,渲染,--,星河,next,参数,组件,UI,就是
From: https://blog.csdn.net/weixin_43331077/article/details/139378850

相关文章