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 value="1">女</option>
                   </select>
        }
    });
    var SignupForm = React.createClass({
        getInitialState: function() {
            return {
                name: '',
                password: '',
                gender: '',
            }
        },
        handleChange: function(name, event) {
            var newState = {};
            newState[name] = event.target.value;
            this.setState(newState)
        },
        handleSelect: function(event) {
            this.setState({gender: event.target.value})
        },
        render: function() {
            console.log(this.state);
            return <form>
                    <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />
                    <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />
                    <GenderSelect handleSelect={this.handleSelect}></GenderSelect>
                   </form>
        }
    });
    ReactDOM.render(<SignupForm></SignupForm>, document.body);
</script>

查看代码

Mixin 编写和使用

        Mixin = 一组方法

        Mixin的目的是横向抽离出组件的相似代码

        相似概念：面向切面编程、插件

        优点：

        代码复用：抽离出通用代码，减少开发成本，提高开发效率

        即插即用：可以直接使用许多现有的Mixin来编写自己的组件

        适应性强：改动一次代码，影响多个组件

        缺点：

        编写难度高：Mixin 可能被用在各种环境中，兼容多种环境就需要更多的逻辑和代码，通用的代价是提高复杂度

        降低代码可读性：组件的优势在于将逻辑和界面直接结合在一起，Mixin本质上会分散逻辑，理解起来难度更大

原始的代码

var BindingExample = React.createClass({
    getInitialState: function() {
        return {
            text: ''
        }
    },
    handleChange: function(event) {
        this.setState({text: event.target.value})
    },
    handleChange2: function(event) {
        this.setState({text2: event.target.value})
    },
    render: function() {
        return (
            <div>
                <input type="text" placeholder="请输入内容" onChange={this.handleChange} />
                <p>{this.state.text}</p>
                <input type="text" placeholder="请输入内容" onChange={this.handleChange2} />
                <p>{this.state.text2}</p>
            </div>
        )
    }
});
ReactDOM.render(<BindingExample></BindingExample>, document.body);

使用Minxin方式后的代码

var BindingMixin = {
    handleChange: function(key) {
        var that = this;
        var newState = {};
        return function(event) {
            newState[key] = event.target.value;
            that.setState(newState);
        }
    }
};
var BindingExample = React.createClass({
    mixins: [BindingMixin],
    getInitialState: function() {
        return {
            text: '',
            text2: '',
        }
    },
    render: function() {
        return (
            <div>
                <input type="text" placeholder="请输入内容" onChange={this.handleChange('text')} />
                <p>{this.state.text}</p>
                <input type="text2" placeholder="请输入内容" onChange={this.handleChange('text2')} />
                <p>{this.state.text2}</p>
            </div>
        )
    }
});
ReactDOM.render(<BindingExample></BindingExample>, document.body);

使用React自带的Mixin方式

var BindingExample = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            text: '',
            text2: '',
        }
    },
    render: function() {
        return (
            <div>
                <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
                <p>{this.state.text}</p>
                <input type="text2" placeholder="请输入内容" valueLink={this.linkState('text2')} />
                <p>{this.state.text2}</p>
            </div>
        )
    }
});
ReactDOM.render(<BindingExample></BindingExample>, document.body);

查看代码