5. React 组件的协同使用 组件嵌套和Mixin

组件是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 "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')} />
                    <"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')} />
                <"text2" 'text2')} />
                <;

使用React自带的Mixin方式

    mixins: [addons.LinkedStateMixin]valueLink={this.linkState(;

查看代码