我们在前面介绍了组件的各种特性，这一节我们来说说多组件的情况。

在实际开发中，我们的组件难免会遇到有公共部分的情况，如果是个别情况还好，但如果数量比较多的话，那这时候，就需要公用了。

怎么公用呢？

React为我们提供了它的方法。

mixin:复用代码

可以把部分代码提出来公用。mixin是掺合混合的意思，即可以把一个对象的属性拷贝到另一个对象上。

使用mixin有两步：

  • 定义一个mixin对象，即如
 var EzLoggerMixin = {

     log:function(){

         //sth. happened here.

     }

 };
  • 使用React.createClass时，给传入的原型对象设置mixins属性
 React.createClass({

     mixins:[EzLoggerMixin],

     render:function(){

         //your render stuff.

     }

 });

可以看出，mixins属性是一个数组，表示可以传多个mixin对象，但是注意注意，传入的mixin对象中，不要有同名属性

来个例子：

定义一个日志的mixin对象，React组件使用mixin获得日志的输入能力。

上代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Component Mixins</title>

     <script src="lib/react.js"></script>

     <script src="lib/JSXTransformer.js"></script>

     <style>

         .ez-logger{

             position:fixed;

             left:0px;

             bottom:0px;

             height:100px;

             width:100%;

             background:#000;

             color:#fff;

         }

     </style>

 </head>

 <body>

     <div id="content"></div>

     <script type = "text/jsx">

         //日志mixin

         var EzLoggerMixin = {

             log:function(txt){

                 //按需撞见日志板DOM对象

                 if(!window._logger_){

                     var el = window._logger_  = document.createElement("pre");

                     el.className = "ez-logger";

                     document.body.appendChild(el);

                 }

                 //计算时间戳

                 var time = new Date,

                     h = time.getHours(),

                     m = time.getMinutes(),

                     s = time.getSeconds(),

                     ts = [h,m,s].join(":");

                 //this.constructor.displayName表示组件的显示名，React自动设置该属性

                 var compName = "[" + this.constructor.displayName + "]";

                 //输出到日志板

                 window._logger_.innerText = [window._logger_.innerText, ts + compName + " : " + txt].join("\n");

             }

         };

         //组件1定义

         var EzDemo1Comp = React.createClass({

             mixins : [EzLoggerMixin], //使用日志mixin

             componentDidMount : function(){

                 this.log("component rendered!");

             },

             render : function(){

                 this.log("rendering the component");

                 return     <div>

                             <p>This is a demo component.</p>

                         </div>;

             }

         });

         //组件2定义

         var EzDemo2Comp = React.createClass({

             mixins : [EzLoggerMixin],  //使用日志mixin

             componentDidMount : function(){

                 this.log("component rendered!");

             },

             render : function(){

                 this.log("rendering the component");

                 return     <div>

                             <p>This is another demo component.</p>

                         </div>;

             }

         });

         //渲染

         React.render(

             <div>

                 <EzDemo1Comp/>

                 <EzDemo2Comp/>

             </div>,

             document.querySelector("#content"));

     </script>

 </body>

 </html>

值得一提的是：

this.constructor.displayName是获得当前组件的显示名，这个是React自动设置的属性

好了，探索React的学习的系列大体就到这里了。之后必要的话，会继续深入写React相关的。谢谢大家思密达

React.js终探（七）(完)的更多相关文章

  1. React.js终探（六）

    在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染 ...

  2. React.js终探（五）

    在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...

  3. React.js再探（四）

    不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...

  4. React.js再探（二）

    上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就 ...

  5. React.js再探（三）

    很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...

  6. react.js 从零开始（七）React （虚拟）DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  7. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. React.js入门

    React 入门实例教程   现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. ...

随机推荐

  1. Web Reference for a WCF Service has Extra “IdSpecified” Parameter ?

    Question: I created a WCF service that exposed a method that has one paramater: public class Service ...

  2. [渣译文] SignalR 2.0 系列： SignalR 自托管主机

    原文:[渣译文] SignalR 2.0 系列: SignalR 自托管主机 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  3. 如何js编译的文件dll对于网页电话

    1. 加入一个项目的解决方案:JSControl 2. 在这个项目中加入js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a ...

  4. Visual Studio 2015 中文企业版及专业版 正式版下载地址 激活秘钥 正版key

    Visual Studio 简体中文企业版 2015 (x86 and x64)文件名 cn_visual_studio_enterprise_2015_x86_x64_dvd_6846222.iso ...

  5. HDU 1085-Holding Bin-Laden Captive!（生成功能）

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  6. SQL SERVER中XML查询：FOR XML指定PATH

    SQL SERVER中XML查询:FOR XML指定PATH 前言 在SQL SERVER中,XML查询能够指定RAW,AUTO,EXPLICIT,PATH.本文用一些实例介绍SQL SERVER中指 ...

  7. oracle设备

    # Oracle Environment export ORACLE_BASE=/opt/oracle export ORACLE_HOME=/opt/oracle/product/11gR2/db ...

  8. C/C++综合測试题(三)

    又刷了一套题 这些题都是百度.阿里巴巴.腾讯.网易.新浪等公司的面试原题,有一定的难度.只是确实相当有水平,能够通过做题来查漏补缺. 1.补充以下函数代码: 假设两段内存重叠,用memcpy函数可能会 ...

  9. 每天的学习经验：SharePoint 2013 定义自己添加的产品清单。Callout菜单项、文档关注、SharePoint服务机端对象模型查询

    前言: 前一段时间一直都比較忙.没有什么时间进行总结,刚好节前项目上线.同一时候趁着放假能够好好的对之前遇到的一些问题进行总结. 主要内容有使用SharePoint服务端对象模型进行查询.为Share ...

  10. JAVA学习（二）：JDK介绍及其结构、用途

    JDK介绍及其结构.用途 1.JDK的介绍 JDK是Java Development Kit 的缩写.是Sun Microsystems针对Java开发员的产品.它由一个处于操作系统层之上的执行环境还 ...