React 组件协同之Mixin

1、Mixin的含义
Mixin = 一组方法（函数）
Mixin的目的是横向抽离出组件的相似代码
相似概念：面向切面编程、插件
2、优缺点
优点：
代码复用：抽离出通用代码，减少开发成本，提高开发效率
即插即用：可以直接使用许多现有的Min新来编写自己的组件
适应性强：改动以此代码，影响多个组件
缺点：
编写难度高：Mixin可能被用在各种环境中，兼容多种环境就需要更多的逻辑和代码，通用的代价是提高复杂度
降低代码可读性：组件的优势在于将逻辑和界面直接结合在一起，Mixin本质上会分赛逻辑，理解起来难度更大
3、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mixin实例--用Mixin实现数据双向绑定</title>
</head>
<body>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../JSXTransformer.js"></script>
<script type="text/jsx">
    /*方法一：不是用Mixin实现数据的双向绑定
    var BindingExample = React.createClass({
        getInitialState:function () {
            return{
                text:'',
            }
        },
        handleChange:function (event) {
            this.setState({
                text: event.target.value,
            })
        },
        render:function () {
            return <div>
                <input type="text" onChange={this.handleChange}/>
                <p>{this.state.text}</p>
            </div>
        }
    });*/
    /*方法二：使用Mixin进行优化*/
    var BindingMixin ={
        handleChange:function (key) {
            var that = this;
            return function (event) {
                var newState={};
                newState[key]=event.target.value;
                that.setState(newState);
            }
        }
    };
    var BindingExample = React.createClass({
        mixins:[BindingMixin],
        getInitialState:function () {
            return{
                text:'',
            }
        },
        render:function () {
            console.log(this.state);
            return <div>
                <input type="text" placeholder="请输入内容" onChange={this.handleChange('text')}/>
                <p>{this.state.text}</p>
            </div>
        }

    });
    ReactDOM.render(<BindingExample/>,document.body);

</script>
</body>
</html>

React 组件协同之Mixin

猜你喜欢