我们在前面介绍了组件的各种特性，这一节我们来说说多组件的情况。
在实际开发中，我们的组件难免会遇到有公共部分的情况，如果是个别情况还好，但如果数量比较多的话，那这时候，就需要公用了。
怎么公用呢？
React为我们提供了它的方法。
mixin:复用代码
可以把部分代码提出来公用。mixin是掺合混合的意思，即可以把一个对象的属性拷贝到另一个对象上。
使用mixin有两步：
1 var EzLoggerMixin = {2 log:function(){3 //sth. happened here.4 }5 };1 React.createClass({2 mixins:[EzLoggerMixin],3 render:function(){4 //your render stuff.5 }6 });可以看出，mixins属性是一个数组，表示可以传多个mixin对象，但是注意注意，传入的mixin对象中，不要有同名属性
来个例子：
定义一个日志的mixin对象，React组件使用mixin获得日志的输入能力。
上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Component Mixins</title> 6 <script src="lib/react.js"></script> 7 <script src="lib/JSXTransformer.js"></script> 8 <style> 9 .ez-logger{10 position:fixed;11 left:0px;12 bottom:0px;13 height:100px;14 width:100%;15 background:#000; 16 color:#fff;17 }18 </style>19 </head>20 <body>21 <div id="content"></div>22 <script type = "text/jsx">23 //日志mixin24 var EzLoggerMixin = {25 log:function(txt){26 //按需撞见日志板DOM对象27 if(!window._logger_){28 var el = window._logger_ = document.createElement("PRe");29 el.className = "ez-logger";30 document.body.appendChild(el);31 }32 //计算时间戳33 var time = new Date,34 h = time.getHours(),35 m = time.getMinutes(),36 s = time.getSeconds(),37 ts = [h,m,s].join(":");38 39 //this.constructor.displayName表示组件的显示名，React自动设置该属性 40 var compName = "[" + this.constructor.displayName + "]";41 42 //输出到日志板43 window._logger_.innerText = [window._logger_.innerText, ts + compName + " : " + txt].join("/n");44 }45 };46 //组件1定义47 var EzDemo1Comp = React.createClass({48 mixins : [EzLoggerMixin], //使用日志mixin49 componentDidMount : function(){50 this.log("component rendered!");51 },52 render : function(){53 this.log("rendering the component");54 return <div>55 <p>This is a demo component.</p>56 </div>;57 }58 });59 //组件2定义60 var EzDemo2Comp = React.createClass({61 mixins : [EzLoggerMixin], //使用日志mixin62 componentDidMount : function(){63 this.log("component rendered!");64 },65 render : function(){66 this.log("rendering the component");67 return <div>68 <p>This is another demo component.</p>69 </div>;70 }71 });72 //渲染73 React.render(74 <div>75 <EzDemo1Comp/>76 <EzDemo2Comp/>77 </div>,78 document.querySelector("#content"));79 </script>80 </body>81 </html>
值得一提的是：
this.constructor.displayName是获得当前组件的显示名，这个是React自动设置的属性
好了，探索React的学习的系列大体就到这里了。之后必要的话，会继续深入写React相关的。谢谢大家思密达
新闻热点
疑难解答
