组件是React的核心，构建大型项目时多个组件之间需要进行协同使用。可以从横向和纵向两个角度来实现组件的协同使用，纵向的协同使用就是组件嵌套，横向的协同使用就是Mixin（抽取公共方法）。下面介绍两种方式
组件协同使用介绍
当组件越来越多的时候，我们就需要对组件进行管理。
组件的协同本质上是对组件的一种
组织、管理方式。
目的：
逻辑清晰
代码模块化
封装细节
代码可复用
实现组件的协同的方式有：
组件嵌套、Mixin（抽离）。
组件嵌套
组件嵌套的本质是父子关系。
父子之间的通讯
优点：
逻辑清晰：父子关系和人类社会的父子关系对应，易于理解
封装细节：开发者只需要关注组件的功能，不用关心组件的实现细节
缺点：
编写难度高：父子关系的具体实现需要经过深思熟虑，贸然编写将导致关系混乱、代码难以维护
无法掌握所有细节：使用者只知道组件用法，不知道实现细节，遇到问题难以修复
<script type="text/babel">
//child
var GenderSelect = React.createClass({
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option @H_502_131@"1">女</option>
</select>
}
});
var SignupForm = createClass({
getInitialState: return {
name: '',
password: gender: }
} handleChange: function(name var newState = {} newState[name] = event.target.value this.setState(newState)
} handleSelect: function(event) {
setState({gender: event.value})
} render: function() {
console.log(this.state) return <form>
<input type="text" placeholder="请输入用户名" this.handleChange.bind(this'name')} />
<@H_502_131@"password" 请输入密码'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
}) ReactDOM.render(<SignupForm></SignupForm>body);
</script>
Mixin 编写和使用
Mixin = 一组方法
Mixin的目的是横向抽离出组件的相似代码
相似概念：面向切面编程、插件
优点：
即插即用：可以直接使用许多现有的Mixin来编写自己的组件
适应性强：改动一次代码，影响多个组件
缺点：
编写难度高：Mixin 可能被用在各种环境中，兼容多种环境就需要更多的逻辑和代码，通用的代价是提高复杂度
降低代码可读性：组件的优势在于将逻辑和界面直接结合在一起，Mixin本质上会分散逻辑，理解起来难度更大
原始的代码
var BindingExample = getInitialState: text: ''
}
} handleChange: text: event.target.value})
} handleChange2: text2: event. render: return (
<div>
<请输入内容this.handleChange} />
<p>{this.state.text}</p>
<this.handleChange2} />
<this.state.text2}</p>
</div>
)
}
});
ReactDOM.render(<BindingExample></BindingExample>;
使用Minxin方式后的代码
var BindingMixin = {
function(key) {
var that = return function(event) {
newState[key] = event.value that.setState(newState) }
}
}createClass({
mixins: [BindingMixin] text2: }
}this.handleChange('text')} />
<@H_502_131@"text2" @H_502_131@'text2')} />
<;
使用React自带的Mixin方式
mixins: [addons.LinkedStateMixin]valueLink={this.linkState(;
