React.js终探（七）(完)
我们在前面介绍了组件的各种特性，这一节我们来说说多组件的情况。
在实际开发中，我们的组件难免会遇到有公共部分的情况，如果是个别情况还好，但如果数量比较多的话，那这时候，就需要公用了。
怎么公用呢？
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终探（七）(完)的更多相关文章
- React.js终探（六）
在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染 ...
- React.js终探（五）
在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...
- React.js再探（四）
不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...
- React.js再探（二）
上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就 ...
- React.js再探（三）
很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...
- react.js 从零开始（七）React （虚拟）DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 使用Yarn+Webpack+Babel6搭建React.js环境
使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React.js入门
React 入门实例教程 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. ...
随机推荐
- Xamarin.Android 入门实例（2）之实现WCF 寄宿于IIS 的Web服务提供
1.WCF 契约 ICalculator.cs using System.ServiceModel; namespace Contracts { [ServiceContract] public in ...
- linux挂载U盘，及乱码问题解决
1. 首先使用切换到root用户. 2. 使用fdisk -l命令查看磁盘信息,找到u盘(能够依据显示的大小确定) 3. 在/mnt下创建挂载点,比如创建usb目录:mkdir /mnt/usb 4. ...
- 【Linux探索之旅】第二部分第二课：命令行，世界尽在掌握
内容简介 1.第二部分第二课:命令行,世界尽在掌握 2.第二部分第三课预告:文件和目录,组织不会亏待你 命令行,世界尽在掌握 今天的标题是不是有点霸气侧漏呢? 读者:“小编,你为什么每次都要起这么非主 ...
- Appium0.18.x迁移到Appium1.x须知事项（灰常实用，解答了本人几个疑问）
英文原版:https://github.com/appium/appium/blob/master/docs/en/advanced-concepts/migrating-to-1-0.md Migr ...
- 利用Eclipse中的Maven构建Web项目（三）
利用Eclipse中的Maven构建Web项目 1.将Maven Project转换成动态Web项目,鼠标右键项目,输入"Project Facets" 2.依据Dynamic W ...
- hdu 5091 Beam Cannon(扫描线段树)
题目链接:hdu 5091 Beam Cannon 题目大意:给定N个点,如今要有一个W∗H的矩形,问说最多能圈住多少个点. 解题思路:线段的扫描线,如果有点(x,y),那么(x,y)~(x+W,y+ ...
- UVA 11992 - Fast Matrix Operations(段树)
UVA 11992 - Fast Matrix Operations 题目链接 题意:给定一个矩阵,3种操作,在一个矩阵中加入值a,设置值a.查询和 思路:因为最多20列,所以全然能够当作20个线段树 ...
- MSXML2;System.ServiceModel.Configuration;对应dll的添加方法
- .NET应用架构设计—工作单位模式（摆脱程序代码的重要思想，反击DDD）
阅读文件夹: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单演示样例 4.总结 1.背景介绍 一直都在谈论面向对象开发.可是开发企业应用系统时.使用面向对象开发最大的问题就是在于,多个 ...
- RH133读书笔记(10)-Lab 10 Exploring Virtualization
Lab 10 Exploring Virtualization Goal: To explore the Xen virtualization environment and the creation ...