在一个应用当中，定会有许多结构类似的模块，如果我们每一次都粘贴，复制，将会是一片混论，也会使得应用变得非常庞大，所以，我们要有组件化开发的思想！
例如：
按钮
那我们就可以将这个按钮独立成一个类:
class SureBtn extends Component{
constructor(props){
super(props)
}
render(){
return(
<div style={styles}>
确认支付
</div>
)
}
}
module.exports = SureBtn;
那么，问题来了 如果是充值按钮呢？我们就需要将文字设置成动态的，由其父组件传递，告诉它，应该显示虾米文字
确认支付 -------->{this.props.text}
//父组件使用时：
<SureBtn text="立即充值" />
还没有结束呢，仅仅是问文字变了，那如果有的按钮较大，有的较小，肿么办？？？
例如这样的：
小圆样儿
样式肿么修改，要再写一遍吗? No！
我们可以借鉴修改文字的思路，样式由父组件传递（部分可能会发生改变的，也就是说，我们可以定义默认样式的哦）
//定义一些默认的样式
var styles={
background:"#4964EF",
lineHeight:"0.8rem",
borderRadius:"0.08rem",
}
//将父组件的样式合并到默认样式中，assign会将addStyle合并在style的后面，
//so，默认样式中已有的部分会被重写
Object.assign(styles,this.props.addStyle);
<div style={styles}>
{this.props.text}
</div>
最终组件的代码如下：
class SureBtn extends Component{
constructor(props){
super(props)
}
render(){
var styles={
background:"#4964EF",
lineHeight:"0.8rem",
borderRadius:"0.08rem",
}
Object.assign(styles,this.props.addStyle);
//组件需要修改的样式定义在名为addStyle的对象中
return(
<div style={styles}>
{this.props.text}
</div>
)
}
}
module.exports = SureBtn;
//使用时：
<SureBtn text="立即充值" addStyle={styles} />
const styles ={
margin:"0.9rem 0.6rem"
}
