组件协同的两种方法，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. 18 如何使用go来采集windows的基本硬件信息后发送到CMDB的服务器上

    preface 之前我使用python写了cmdb采集的脚本,打包成exe的二进制文件后放在windows上执行,也达到了预期的效果. 但是最近部门要上open-falcon监控体系,每个服务器都要安 ...

  2. mongodb：修改oplog.rs 的大小size

    其内容字段说明: ts:操作日志的timestamp t: 未知? h:操作唯一随机值 v:oplog.rs的版本 op:操作类型: i:insert操作 u:update操作 d:delete操作 ...

  3. 英文版Ubuntu18.10安装搜狗输入法过程(图文并茂，亲自尝试！)

    英文版Ubuntu18.10安装搜狗输入法过程 过程比较艰辛,折腾了好长的时间,不过最终还是装好了,特记录一下! 首先去搜狗输入法网址下载Linux版本:https://pinyin.sogou.co ...

  4. c++友元函數---16

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 有些情况下,允许特定的非成员函数访问一个类的私有成员,同时仍阻止一般的访问,这是很方便做到的.例 ...

  5. GCD (Grand Central Dispatch) 笔记

    GCD (Grand Central Dispatch) 是Apple公司开发的一种技术,它旨在优化多核环境中的并发操作并取代传统多线程的编程模式. 在Mac OS X 10.6和IOS 4.0之后开 ...

  6. Linux查看系统进程

    1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 tomcat 的 to 按 tab).2. ps ...

  7. GoF--装饰者设计模式

    顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例. 装饰器模式的应用场景: 1.需要扩展一个类的功能. 2.动态的为 ...

  8. C#反射基础理解1(转)

    反射提供了封装程序集.模块和类型的对象(Type类型) 可以使用反射动态的创建类型的实例,将类型绑定到现有对象,或从现有对象中获取类型,然后,可以调用类型的方法或访问其字段和属性 . 总之,有了反射, ...

  9. Axis2发布服务，支持Tomcat和Weblogic的SSHWeb项目部署

    先说下遇到的问题,在SSHWeb项目中使用JDK自带的jar发布WebService(Endpoint.publish),在tomcat下可以正常发布,但是在Weblogic报奇葩错误,如Struts ...

  10. 查询mssql 密码

    select name,password from syslogins Select master.dbo.fn_varbintohexstr(password_hash) from sys.sql_ ...