我之前用angularjs,当时的angular 1的版本,数据双向绑定成为一个亮点,也是人们诟病至今的一个问题。直到我遇到了react,非常欣赏react组件化编程的思路。可以使得复杂的大型应用碎片化,而又可以很好的组织在一起,便于管理。今天分享一下对于写组件的一些看法和心得。代码演示还是以react为主。
如何定义一个组件是优秀的,或者我们通常意义上认为的好的,我们从以下几个方面展开讨论。
单一响应 - “Single responsibility”
说白了,就是组件尽量只干一件事。说起来容易做起来却很不容易。我们往往喜欢或者习惯不断的扩展组件的响应,最后变成一个『胖』组件-他能完成所有事
我们为什么要要求组件单一响应,其实不论我们的组件用来做什么-加载一个图片,显示一个列表,发起一个ajax请求,我们都希望在改变组件的时候变得简单可控。
来看下
例如:我们需要一个获取数据的组件
- server url 发生变化
- 响应格式发生变化
- 你想换一个ajax库
- 或者是其它改变
例如:我们写一个table组件
- 限制table中展示的行数
- 当没有数据的时候展示 『暂无数据』
- 增加排序功能
- 增加分页功能
- 或者其它需求
如果我们无法用一个单一响应组件满足所有需求,就需要拆分成更细小的组件来完成任务。
这里想一下一个『胖』组件产生的理由:
- 在我开发组件的时候不需要去结构化的细分需求
- 无需创建很多组件,也就无需管理子组件之间的关系
- 也就不用创建很多的props和event保持组件的通信
请自问:请问你写一个页面或者组件,他需要弹窗,那么你的弹窗是写在组件里面,还是另外写一个弹窗组件?
看下这里的组件怎么拆分
封装- “Encapsulated”
封装的目的和好处也非常简单,就是解耦。
松耦合的好处:
- 当组件改变时不会影响其他组件
- 任何一个组件都可以被即时替换
- 提高单一组件在系统的可复用性
- 独立组件很方便被测试
- 隐藏组件信息
可组合-"Composable"
既然我们希望组件单一响应,封装,那么必然导致复杂功能的难以实施,那么我们必然要求组件可以被灵活的组合拼装。来满足复杂应用
可重用-"Reusable"
代码写一次可以被应用到多个场景,而不需要进行二次开发,做到上面3条,这一条自然达成
纯净-“Pure” or “Almost-pure”
纯净的组件的意思被单一诱因改变
改一下变得纯净
举一个实际的例子
可测试-“Testable” and “Tested”
语义化-"Meaningful"
<DatePicker>
, <GridItem>
, <Application>
, <Header>
组件语义化就是最好的文档
One word - one concept
总结:
一个可靠的组件可以履行一个职责,隐藏其内部结构,并提供有效的属性和接口控制其行为。
怎么做:
一开始就写一个优秀的组件是很难的,原因很多,根本原因是我们一开始无法想清楚所有的环节,不是偷懒,而是可获取的资料太少。那么我们应该怎么做-迭代或者优化
责任心或者叫工匠精神-因为很少有人喜欢不断翻老代码,除非他很有可能在以后用到,所以一边培养工匠精神,一边趁热打铁,在最快的时间不断去完善自己的代码,我一般会在发布后,就上次的失误,改一些代码,当然要在可控的情况下,然后把他放到二期催促测试回归测试,自己也要充分测试。
听取他人的意见,codereview非常合适,帮助自己的同时也帮助别人提升。review的第一件事就是看你的代码是否语义化,没人愿意帮你review代码只有一个原因,你的代码可读性太差。需要提升了。