首先组件封装一般是为了解决两个问题,复用和一定程度上提高维护性,组件的本质就是一个接受参数返回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接着是常规组件的封装,有些组件,我们可能需要结合不同参数实现组件功能,也是业务开发里最常见的一类组件