如何写一个优秀的组件

我以前用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代码只有一个缘由，你的代码可读性太差。须要提高了。