react之通用UI组件库开发总结-1

从今年公司前端全面gulp-webpack打包，技术栈就开始全面转向react，新项目基本上是react-redux。ui方面也开始正规化，制定了一套通用规则和通用组件原型。为了解决各浏览器样式问题，如火狐的checkbox，滚动条属性不支持等引起的体验不一致，也为了方便快捷开发，一套通用的react ui组件库必不可少。
自己造轮子，还是用轮子？这是程序员经常遇到的问题，通常要根据公司规模和项目的需求来做出取舍，稍微比较了一下现在比较流行的组件库，为了满足自己这边一些特殊需求，而且为了以后维护更方便，还是决定自己另造一套轮子。

###可控组件和非可控组件
react最让人兴奋的思维莫过于其组件化了。而组件则被分为可控和非可控组件，通常组件都是可控组价，而在设计一些表单组价的时候通常要考虑到不可控情况。什么是可控什么是不可控，熟悉react的就不必说了，react自己的表单控件就分可控不可控两种状态。

// 不可控控件，只接受初始value值，后面的输入不受控制
<input defaultValue="不可控" />

// 可控控件，input的值只受传下来的value控制，用户输入无效,可以通过更新state和value来改变
<input defaultValue="可控" value={this.state.value}/>

就react而言，input也已经不是html原生的input，而是在其包装一层之后。我们写的form表单控件也应该贴近react表单控件的方式，分为可控和不可控两种状态。
两种状态有各自的使用场景，我们默认只传默认值的时候是不可控的，而传一个value值时是可控的。