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

首先组件封装一般是为了解决两个问题，复用和一定程度上提高维护性，组件的本质就是一个接受参数返回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参数，由具体的业务方决定要做什么事儿，组件只管把横竖屏状态传出去

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