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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.      <title>daomul's example</title>
  6.      <link rel="stylesheet" href="../shared/css/base.css" />
  7.    </head>
  8.    <body>
  9.      <h1>Text demo</h1>
  10.      <div id="container">
  11.  
  12.      </div>
  13.  
  14.      <script src="../shared/thirdparty/es5-shim.min.js"></script>
  15.      <script src="../shared/thirdparty/es5-sham.min.js"></script>
  16.      <script src="../shared/thirdparty/console-polyfill.js"></script>
  17.      <script src="../../build/react.js"></script>
  18.      <script src="../../build/JSXTransformer.js"></script>
  19.      <script type="text/jsx">
  20.  
  21.      //选择组件
  22.      var GenderSelect = React.createClass({
  23.  
  24.          render:function(){
  25.            console.log("render,4");
  26.            return <select onChange = {this.props.handleSelect}>
  27.            <option value = "0">男</option>
  28.            <option value = "1">女</option>
  29.            </select>;
  30.          },
  31.      });
  32.  
  33.      //表单组件
  34.      var SignupForm = React.createClass({
  35.        getInitialState:function(){
  36.          return {
  37.            name :'',
  38.            password:'',
  39.            gender:0,
  40.          };
  41.        },
  42.        handleChange:function(name,event){
  43.          var newState = {};
  44.          newState[name] = event.target.value;
  45.          this.setState(newState);
  46.        },
  47.        handleSelect:function(event){
  48.          this.setState({gender:event.target.value});
  49.        },
  50.        render:function(){
  51.          console.log(this.state);
  52.          return <form>
  53.              <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange.bind(this,'name')} ></input>
  54.              <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange.bind(this,'password')} ></input>
  55.              <GenderSelect type="text" handleSelect = {this.handleSelect}></GenderSelect>
  56.            </form>;
  57.        },
  58.      });
  59.  
  60.      React.render(<SignupForm></SignupForm> ,document.body);
  61.  
  62.      </script>
  63.    </body>
  64.  </html>

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.      <title>daomul's example</title>
  6.      <link rel="stylesheet" href="../shared/css/base.css" />
  7.    </head>
  8.    <body>
  9.      <h1>Text demo</h1>
  10.      <div id="container">
  11.  
  12.      </div>
  13.  
  14.      <script src="../shared/thirdparty/es5-shim.min.js"></script>
  15.      <script src="../shared/thirdparty/es5-sham.min.js"></script>
  16.      <script src="../shared/thirdparty/console-polyfill.js"></script>
  17.      <script src="../../build/react.js"></script>
  18.      <script src="../../build/JSXTransformer.js"></script>
  19.      <script type="text/jsx">
  20.  
  21.      //Mixin
  22.      var BindMixin = {
  23.        handleChange:function(key){
  24.          //先将this保存起来是因为在js中，方法内部再调用函数的话会使得this的丢失
  25.          var self = this
  26.          //这个变量如果放在function内部的话会加大构建的内存损耗
  27.          var newState = {}
  28.          return function(event){
  29.            //这里不能直接使用self.setState({key:event.targe.value})
  30.            //因为key是作为'key'字符串的存在传入的
  31.            newState[key] = event.target.value
  32.            self.setState(newState)
  33.          }
  34.        }
  35.      }
  36.      var TextClass = React.createClass({
  37.  
  38.        //这里就是作为对Mixin的使用
  39.        mixins : [BindMixin],
  40.        getInitialState:function(){
  41.          return {
  42.            name :'',
  43.            password:'',
  44.          };
  45.        },
  46.        render:function(){
  47.          return <div>
  48.              <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange('name')} ></input>
  49.              <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange('password')} ></input>
  50.              <p>{this.state.name}</p>
  51.              <p>{this.state.password}</p>
  52.            </div>;
  53.        },
  54.      });
  55.  
  56.      React.render(<TextClass></TextClass> ,document.body);
  57.  
  58.      </script>
  59.    </body>
  60.  </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. 最新Java面试题及答案整理

    基础篇 一.基本功 面向对象特征 封装,继承,多态和抽象 1. 封装 封装给对象提供了隐藏内部特性和行为的能力.对象提供一些能被其他对象访问的方法来改变它内部的数据.在 Java 当中,有 3 种修饰 ...

  2. git branch 命令

    1.git init 该命令执行之后并没有创建branch 2.git add 添加文件,这时branch 也还没生成.git branch name也没用 3.git commit 提交到git r ...

  3. UML类图关系(转,添加了实例)

    UML类图关系(泛化 .继承.实现.依赖.关联.聚合.组合) 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Associati ...

  4. Linux中实现多网卡绑定总结

    在Linux中实现多网卡绑定 一.原理介绍: 1.什么是bonding? Linux bonding 驱动提供了一个把多个网络接口设备捆绑为单个的网络接口设置来使用.用于网络负载均衡及网络冗余: Li ...

  5. SpringMVC由浅入深day01_6源码分析(了解)

    6 源码分析(了解) 通过前端控制器源码分析springmvc的执行过程. 入口 第一步:前端控制器接收请求 调用doDiapatch 第二步:前端控制器调用处理器映射器查找 Handler 第三步: ...

  6. zabbix添加Tomcat监控

    参靠了网上一些关于zabbix添加Tomcat的监控配置,自己整理了下: 一.服务器端配置1.找到zabbix源码存放路径 # find / -name zabbix_java #/usr/local ...

  7. HttpClient（二）-- 模拟浏览器抓取网页

    一.设置请求头消息 User-Agent模拟浏览器 1.当使用第一节的代码 来 访问推酷的时候,会返回给我们如下信息: 网页内容:<!DOCTYPE html> <html> ...

  8. 【译】Apache Flink Kafka consumer

    Flink提供了Kafka connector用于消费/生产Apache Kafka topic的数据.Flink的Kafka consumer集成了checkpoint机制以提供精确一次的处理语义. ...

  9. codeforces水题100道 第一题 Codeforces Beta Round #1 A. Theatre Square (math)

    题目链接:http://www.codeforces.com/problemset/problem/1/A题意:至少用多少块边长为a的方块铺满NxM的矩形区域.C++代码: #include < ...

  10. iOS - UIScrollView 相关属性代理详解

    一.UIScrollView的属性和代理方法详解 属性: - (void)viewDidLoad { [super viewDidLoad]; _scrollView.backgroundColor ...