星级评价组件--引发对React组件的思考
机缘巧合之下,我在接到我司产品星级评价需求的前一天,看到了蜗牛老湿的《★tiny-rate 东半球最小的评级组件☆》,在大佬的启发下我就十分顺手的撸了一个移动端用的星级评价组件。
本篇会涉及的内容有:
- 评价组件的实现
- React组件开发浅谈
- 小结&组件源码(不涉及业务)
星星评价组件的实现
组件的实现十分简单,基本都是参照tiny-rate的写法,就是在每颗星星的处理上有点区别:
星星填充的写法与tiny-rate类似,也是两层元素的叠加来模拟星星填充的效果,与之不同的是我给每颗星星(item)上都添加了点击事件,为了兼容我们在移动端的使用。点击每颗星星时,获取其序号,通过css3d的calc来计算出应该变化的宽度,从而达成星星填充的效果。
另外,由于☆与★在不同的手机上显示的效果可能不尽相同,但因为组件设计模式是叠加,所以我们可以将其替换成图片或是css画成的符号,以保证各端展示的统一。
最终的效果是这样滴--
React组件开发浅谈
其实本次主要想记录的内容是个人对React公用组件开发的一些看法--
明确组件功能
以这次的评价组件为例,在开发的是应该专注于评分的功能&显示,其他的需求(例如GIF中点击星级之后展示的文字说明)或附属功能都不应该写到组件内,造成组件与弱相关业务的耦合,这样才能为下次在其它情景中使用组件提供便利。
定义默认参数
作为一个公用的组件,对外暴露的Props是必不可少的,但是倘若我们在引用时,没有了解清楚必须的Props有哪些时,很容易会造成参数的缺失或错误。这种时候如果组件内没有定义相关的默认参数的话,会导致组件没法正常挂载或者是遍地红字。
以上述评级组件为例↓↓
// 在组件头部就应该定义支撑组件正常运行的Props参数
static defaultProps = {canClick: true, // 可否点击rateNum: 5, // 星星个数handleSelectRate: null, // 选中星星后的回调rateValue: 0 // 选中星星的个数
}
复制代码
留意组件拓展
我们的项目肯定是不断在迭代的,所以我们在设计组件的时候也应该考虑到其灵活性,面对可能出现的需求迭代,应保留相应的配置空间。
如图中的width计算,在this.state.rateValue没有被赋值的情况下,我们会使用this.props.rateValue中的值来进行展示,这样就为我们的组件拓展出展示功能,不仅是在这个页面负责评分的选择,还可以在其他地方负责评分的显示。另外,组件的各种样式也应该是可拓展的方面之一。
需要暴露的API
作为一个非UI组件,自然是有其需要承担的功能性职责,这种时候就需要为其拟定相应的方法,有些方法是组件内部私有的,而有一些则应该暴露出来,让父级能够顺利调用。以评级组件为例,作为父组件,在使用该评级组件是最关心的是什么?没错,就是用户是否点击了你,并且用户点击了什么评级。这就很明了了,我们在编写组件时,应该在星星的点击事件上为父组件保留点击成功的响应。
handleSelectRate(value) {if (!this.props.canClick) {return}this.setState({rateValue: value})// 点击成功后调用父组件传入的方法this.props.handleSelectRate && this.props.handleSelectRate(value)
}
复制代码
小结&组件源码(不涉及业务)
这些也不是啥干货,只是在平时工作开发中总结的一些东西,希望大大们轻拍。无论是用什么框架,组件应该都是绕不开的话题,如果能养成良好的组件开发思维,相信能让我们的开发效率得到提升,同时也能为其他同事提供便利。
源码环节--Github传送门
后话--为啥你敢把在用的组件源码直接丢出来??因为...它真的就只能用来点击评分...
星级评价组件--引发对React组件的思考相关推荐
- react组件之间传递信息/react组件之间值的传递
react组件之间传递信息/react组件之间值的传递 首先咱们先来了解一下,数据是怎么进行相互间传递的; api和组件的区别:一个是逻辑层的方法函数,一个是表现层的组件(方法函数). api是一组预 ...
- 编写react组件_如何编写第一个React.js组件
编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...
- 【React】设计高质量的React组件
内容大纲 划分组件边界的原则 React组件数据种类 React组件的生命周期 React应用将围绕着组件的设计展开,所以关于组件的设计至关重要. 设计易于维护的组件原则 任何一个复杂的应用,都是由一 ...
- React教程(二):React组件基础
传送门: React教程(一):React基础 一.组件概念 react官方解释: React 允许你将标记.CSS 和 JavaScript 组合成自定义"组件",即应用程序中可 ...
- vue实现一个星级打分效果_Vue实现星级评价效果
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
- vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
- react 组件构建_为React构建星级评定组件
react 组件构建 Who doesn't love beer? When you drink a great beer you want to tell someone. You definite ...
- 编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码
编写react组件 以及钩子如何发挥作用 (And how hooks come into play) Recently I've adopted a new philosophy that chan ...
- React组件设计实践总结05 - 状态管理
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...
最新文章
- 剑指Offer #03 从尾到头打印链表(递归)
- laravel php7.2报错,laravel,php_运行php artisan serve时报错,laravel,php - phpStudy
- ASP.NET常用语句1--20条 非常实用
- shell脚本执行命令错误处理
- java break与continue_java中的break与continue
- iphone 开发第四天 - 字符串
- 反射类 Method类的使用
- Clover 驱动文件夹_通过AppleALC,轻松解决苹果声卡驱动的问题.
- Qt进阶-汉字转拼音/全拼
- Play框架文件上传
- Java实现动态规划经典题目
- SQL注入原理-时间盲注
- flash 图表(XML动态获取数据)
- python语言基本认识_Python学习之认知(一)
- 树大总结(王道+红皮书)
- 纯HTML编写仿淘宝粉丝福利购页面-优惠券、商品列表、图片悬浮等布局
- 酷家乐怎样把两个方案合并_两个地产科技的理工男联姻:他们都想做一家云端的Autodesk...
- MyBatis基本工作原理
- 财务自由之路——我的投资史(2)
- Amber中对体系的距离角度和二面角加以限制
热门文章
- Dubbo的Javassist代理
- linux python开发环境sql数据迁移到mysql_运用Python语言编写获取Linux基本系统信息(三):Python与数据库编程,把获取的信息存入数据库...
- byte数组添加数据_C#基于S7协议实现对PLC中DB块字节数据的获取及自定义textbox实现数据解析...
- Go 语言 bytes.Buffer 源码详解之1
- 线上频繁发生Full GC 如何调优?如何快速定位OOM、cpu飙升、线程死锁等问题
- cpu负载过高问题处理
- SpringBoot 精通系列-使用Swagger2构建RESTful APIs
- 【SpringMVC框架】注解的处理器映射器和适配器配置
- Libvirt虚拟机的Qos与Cgroup
- golang dlv 远程调试