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 颗星,受瞩目程度可见一斑. ...
随机推荐
- 使用 WPF 实现所见即所得HTML编辑器
Introduction In this tip, you will learn the use of WPF webbrowser control and the use of the librar ...
- 在AcGIS随着大数据的生成DEM
在ArcGIS产生DEM时间.数据来源是经常有的高程点.轮廓线,该高程点.等高线密集,可能有几千万.甚至亿高程点.轮廓线. 如果您使用这些矢量数据生成TIN.不能实现的,由于生成TIN时,支持的最大结 ...
- GitLab 之 Linux十分钟快装（转）
先把 Shell 命令贴出来,楼主以 CentOS release 6.5 (Final) 64位 为例: //配置系统防火墙,把HTTP和SSH端口开放. sudo yum install curl ...
- OCP-1Z0-051-名称解析-文章12称号
12. You need to produce a report where each customer's credit limit has been incremented by $1000. I ...
- 使用AppCompat_v7 21.0.0d的几个兼容问题
1.实现新的ActionBarDrawerToggle动画 ActionBarDrawerToggle使用最新的AppCompat_v7 21会出现一个非常帅的动画.使用方式在Androidstudi ...
- 与我一起extjs5(09--其定义菜单2)
跟我一起学extjs5(09--自己定义菜单2) 这一节来定义另外三种类型的菜单类. 首先定义菜单button类.文件放于app/view/main/region文件夹以下,文件名称为 ...
- OpenNMS在安装”我找不到jrrd.dll“错误的解决方法
在Windows 2003 Server(虚拟机)安装OpenNMS.找不到jrrd.dll错误.尝试从学习OpenNMS官网下载jrrd-1.0.7.tar.gz,我们没有发现标dll文件,编译需要 ...
- Android Studio中导入Android项目StepbyStep
想把在eclipse的项目导入Android studio,有两种方法,但是我喜欢的是不改变项目文件结构的方法,因为这样可以兼容eclipse. 第一步: 导入的项目不能运行,需要配置运行环境.And ...
- ViewPager实现页面切换
先贴效果图(每个开关Tab债券.尾随页变化.效果图蓝条添加的用户体验) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzIxMDYyMA==/fo ...
- eclipse 在win7 64两个图标出现位操作系统无法锁定到任务栏或任务栏
eclipse 在win7 64位操作系统无法锁定到任务栏或者任务栏上出现两个图标 解决的方法 eclipse在win7 64bit下无法锁定到任务栏问题(或是锁定后任务栏出现两个eclipse图标) ...