React.js终探（7）(完)

React.js终探（七）(完)

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

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

怎么公用呢？

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

mixin:复用代码

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

使用mixin有两步：

定义一个mixin对象，即如

1 var EzLoggerMixin = {
2     log:function(){
3         //sth. happened here.
4     }
5 };

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

1 React.createClass({
2     mixins:[EzLoggerMixin],
3     render:function(){
4         //your render stuff.
5     }
6 });

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

来个例子：

React.js终探（7）(完)

定义一个日志的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         //日志mixin
24         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], //使用日志mixin
49             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],  //使用日志mixin
62             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相关的。谢谢大家思密达

1楼mackxu: 谢谢分享，期待下一篇文章！

React.js终探（7）(完)

相关推荐