react组件的协同使用

责编:menVScode 2017-06-20 21:36 阅读(618)

       为什么要react组件的协同?在实际的开发项目的时候,不会只用几个组件,有时候遇到大型的项目,可能会有成千上百的组件,难免会遇到有功能重复的组件,如果要一个一个的写,会相当的麻烦,而且如果要进行修改,就会修改大部分的文件。所以我们需要进行组件的协同开发。

         react组件的协同本质上是对组件的一种组织、管理的方式。 目的是为了组件与组件之间的逻辑清晰;代码模块化;能像面向对象一样将常用的方法以及数据封装起来;提高代码的复用性,因为是组件,相当于一个封装好的东西,用的时候直接调用。

        实现组件的协同使用的方法

         第一种:增加一个父组件,将其他的组件进行嵌套,更多的是实现代码的封装

        页面效果是可以输入用户名、密码,可以选择男女,其中选择男女方法写在父组件里,子组件委托父组件来进行选择。

import React,{Component} from 'React';
//子组件:性别组件
class Sex extends React.Component{
	render(){
		return(
			<select onChange={this.props.childSelect}>
				<option value='1'></option>
				<option value='0'></option>
			</select>
		)
	}
}
//父组件
class Form extends React.Component{
	constructor(props){
		super(props);
		this.state = {//设置初始的状态
			name:'',
			password:'',
			sex:'0'
		}
	}
	doChange(key,ev){ //输入用户名和密码事件
		var ev = ev || window.event;
		var newState = {};
  		newState[key] = ev.target.value;
  		this.setState(newState);
	}
	childSelect=(ev)=>{//子组件选择男女事件
		var ev = ev || window.event;
		this.setState({
			sex:ev.target.value
		})
	}
	render(){
		console.log(this.state);//{name: "", password: "", sex: ""}
		return (
			<form>
				<input type='text' onChange={this.doChange.bind(this,'name')} placeholder='输入用户名' />
				<input type='password' onChange={this.doChange.bind(this,'password')} placeholder='输入密码' />
				<Sex childSelect={this.childSelect} />
			</form>
		)
	}
} export default Form;

        组件嵌套的优缺点

        优点: 

                 逻辑清晰:父子关系类似于人类中的父子关系;

                模块化开发:每个模块对应一个功能,不同的模块可以同步开发;

                封装细节:开发者必须要关注组件的功能,不需要了解细节;

        缺点: 

                 编写难度高:父子组件的关系需要经过深思熟虑,贸然编写可能导致关系混乱,代码难以维护;

                无法掌握所有细节:使用者只知道组件的用法,不知道实现细节,遇到问题难以修复;


        第二种:通过一些操作从后台获取数据,React中的Mixin,更多的是实现代码的复用

        可查看本篇文章:http://menvscode.com/detail/59492f1d6f402968fec7cd8f

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

邮箱快速注册

忘记密码