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