组件协同的两种方法,1种是纵向的协同,就是组件嵌套,重点在于代码的封装,2种是横向协同也就是Mixin,组件抽离,重点在于代码复用

1、组件嵌套,父组件通过属性向子组件,子组件可以通过事件处理函数以委托的方式想父组件发送数据

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container"> </div> <script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx"> //选择组件
var GenderSelect = React.createClass({ render:function(){
console.log("render,4");
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:0,
};
},
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>
<input type = "text" placeholder = "请输入密码" onChange = {this.handleChange.bind(this,'password')} ></input>
<GenderSelect type="text" handleSelect = {this.handleSelect}></GenderSelect>
</form>;
},
}); React.render(<SignupForm></SignupForm> ,document.body); </script>
</body>
</html>

2、Mixin就是 横向抽离相似的代码

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container"> </div> <script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx"> //Mixin
var BindMixin = {
handleChange:function(key){
//先将this保存起来是因为在js中,方法内部再调用函数的话会使得this的丢失
var self = this
//这个变量如果放在function内部的话会加大构建的内存损耗
var newState = {}
return function(event){
//这里不能直接使用self.setState({key:event.targe.value})
//因为key是作为'key'字符串的存在传入的
newState[key] = event.target.value
self.setState(newState)
}
}
}
var TextClass = React.createClass({ //这里就是作为对Mixin的使用
mixins : [BindMixin],
getInitialState:function(){
return {
name :'',
password:'',
};
},
render:function(){
return <div>
<input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange('name')} ></input>
<input type = "text" placeholder = "请输入密码" onChange = {this.handleChange('password')} ></input>
<p>{this.state.name}</p>
<p>{this.state.password}</p>
</div>;
},
}); React.render(<TextClass></TextClass> ,document.body); </script>
</body>
</html>

React 组件协同关系的更多相关文章

  1. React 组件间通讯

    React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...

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

            组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...

  3. React.js学习笔记(一):组件协同与mixin

    组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

  7. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

  8. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  9. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

随机推荐

  1. 页面加载中jquery逐渐消失效果实现

    为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading" ...

  2. 如何在xml中设置textview不可见

    可见(visible)XML文件:android:visibility="visible"Java代码:view.setVisibility(View.VISIBLE);不可见(i ...

  3. Apache伪静态配置,支持.htaccess配置方法

    第一.编辑httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...

  4. mysql执行SQL语句时报错:[Err] 3 - Error writing file '/tmp/MYP0G1B8' (Errcode: 28 - No space left on device)

    问题描述: 今天一同事在mysql中执行SQL语句的时候,报了/tmp空间不足的问题,报错如下: [SQL] SELECT f.prov as 字段1, MAX( CASE f.flag_name W ...

  5. [MySQL] 01- Basic sql

    准备 一.配置 1. 登录:mysql -u root -p  2. phpMyAdmin创建数据库,并导入.sql文件. 3. 支持中文:set names utf8; 二.面试题 参考:面试宝典- ...

  6. [转]spring 官方下载地址(Spring Framework 3.2.x&Spring Framework 4.0.x)

    SPRING官方网站改版后,建议都是通过 Maven和Gradle下载,对不使用Maven和Gradle开发项目的,下载就非常麻烦,下给出Spring Framework jar官方直接下载路径: h ...

  7. [AX]AX2012 R2 EP员工自助服务中的产品不能显示图片的问题

    在员工自助服务EP站点中员工可以通过Order products自助提交采购申请,在正确设置员工采购目录后会罗列出允许员工购买的产品,每个产品都可带有图片,我们可以通过Product image来为产 ...

  8. systemctl命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...

  9. Struts2开发模式漏洞

    当Struts2中的devMode模式设置为true时,存在严重远程代码执行漏洞.如果WEB服务以最高权限运行时,可远程执行任意命令,包括远程控制服务器. 如果为受影响的版本,建议修改配置文件stru ...

  10. Hadoop核心架构HDFS+MapReduce+Hbase+Hive内部机理详解

    转自:http://blog.csdn.net/iamdll/article/details/20998035 分类: 分布式 2014-03-11 10:31 156人阅读 评论(0) 收藏 举报 ...