创建公共组件的总结
在react中创建公共组件就意味着复用组件,将项目中有相似功能的地方提取出来,作为公共组件去复用,可以提高代码的质量和可读性,在需要修改的时候也更加方便。
公共组件的提取
在刚开始提取项目相似部分组成公共组件时,我更在意前端部分的相似从而去提取,但更重要更有价值的公共组件,是体现在功能层面上的,下面会以checkbox复选框公共组件为例,总结我在创建react公共组件时的思路和问题。
checkbox组件创建思路
1.需求:项目在多个地方用到了checkbox复选框,有选择支付方式的单选,有选择课程的多选,并且能够拿到被选择勾选的选项值。
2.checkBox组件:首先需要理清需要展示的部分结构(单个选择框,以及带有选择框的内容展示)。例如有选择框+标题的展示,有图标+标题+选择框的展示等。在checkBox组件中,由taro自带的Checkbox和父级传递过来的展示内容组成,Checkbox中的属性主要有checked,控制复选框是否为勾选状态,与点击的情况保持一致,并且在整个view上有点击事件,使点击整个展示部分,都可以触发点击事件传递点击的值。按照这个思路,可以实现多个checkbox的渲染,以及传递所点击复选框的值。代码如下:
3.checkBoxGroup组件:实现了单个选项框的展示与事件的绑定,接下来要用checkBoxGroup组件解决的问题是控制单选或多选以及获取所有处于勾选状态的值。当复用的时候,被复用的是checkBoxGroup组件,并向其中用数组的形式传递需要渲染的内容以及控制是否多选的属性。
(1)首先在checkBoxGroup中通过map来渲染出多个checkbox,并且向其传递需要展示的内容以及点击事件.
(2)接下来是对值的处理,将点击的值处理为我们想要拿到的形式。通过触发点击事件,可以拿到所点击的item的值,我所希望获取的数值是数组的形式,那么根据这一思路通过数组方法来进行数据处理。通过是否为多选属性来进行判断,能够进行多选时,一旦点击就在数组中进行查找,所点击属性是否存在,进行相应的push或splice的操作,不能够进行多选时,保证数组中有且只有一个数据即可。代码如下:
(3)最后在运用checkBoxGroup组件时,向其传递一个onChange事件,以便返回获取的数组。
创建公共组件的规范
理清思路
在创建组件时要思路清晰,条理清楚,分层分级,先思考再动手,例如这次应用,首先分成单个checkbox的展示,再实现多个checkbox的展示与点击。也要明确创建组件的功能是什么,例如这次应用,需要有属性去判断单选或多选,需要拿到以数组形式的数据。对应这些需求和功能,进行属性的分化与数据的处理。
命名规范
变量的命名是我没有很重视的地方,不知道怎么命名的时候,没有思考就随便命名,写代码的时候没有感觉,等回头再来审查代码的时候,自己都想不起来这个变量是什么。所以命名规范很重要,命名与变量功能相关的名字,也不要命名多余的变量。
属性以及数据类型
确定所需要使用和传递的属性,明确属性的类型,用于判断的属性应该使用布尔类型,用于比较的属性可以使用string类型,明确类型在使用属性的过程中很重要。
注意
多处理少判断。能够进行处理的地方,直接进行处理,少用属性来进行判断,增加代码量。