如何写一个优秀的组件

858 阅读4分钟

我之前用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代码只有一个原因,你的代码可读性太差。需要提升了。