react组件的Mixin介绍

责编:menVScode 2017-06-20 22:20 阅读(823)

        Mixin的含义:向抽离出组件的相似代码忙,把组件的共同作用以及效果的代码提出来。

        es5的写法

//设置mixin
var SetMixin = {
	componentWillMount:function(){
		console.log(componentWillMount)
	},
	componentDidMount:function(){
		console.log(componentDidMount)
	}
}
var Demo = React.creatClass({
	mixins:[SetMixin],//使用mixin
	render:function(){
		return <div>hello world!</div>
	}
})

        es6写法

import React from 'React';
var BindingMixin = {
	doChange:function(key){
		var _this = this;
		return function(ev){
			var ev = ev || window.event;
			var newState = {};
	  		newState[key] = ev.target.value;
	  		_this.setState(newState);
		}
	}
}
class Binging extends React.Component{
	constructor(props){
		super(props);
		this.state={
			text:''
		}
		this.doChange = BindingMixin.doChange
	}
	render(){
		return(
			<div>
				<input type='text' onChange={this.doChange('text')} />
				<p>{this.state.text}</p>
			</div>
		)
	}
}
export default Binging;

        Mixin的优缺点

        优点: 

                 代码复用:抽离出通用的代码,减少开发是成本,提高开发效率 ;

                即插即用:可以使用许多现有的Mixin来开发自己的代码; 

                 适应性强:改动一次代码,影响多个组件;

        缺点: 

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

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

标签: react Mixin reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码