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 颗星,受瞩目程度可见一斑. ...
随机推荐
- android判断是否含有某权限
boolean has_permission = (PackageManager.PERMISSION_GRANTED == pkm.checkPermission("android.per ...
- iOS_11_tableViewCell使用alertView变更数据
最后效果图: Girl.h // // Girl.h // 11_tableView的使用_红楼梦 // // Created by beyond on 14-7-26. // Copyright ( ...
- 对于COM对象使用ComPtr代替传统指针
对于COM对象来说使用传统指针比较麻烦,还要记得Release()防止内存泄漏,一不小心就会出现各种各样的问题.针对这种问题微软提供了对于COM对象的智能指针ComPtr,这里是官方文档https:/ ...
- UVA 1546 - Complete the sequence!(差分法)
UVA 1546 - Complete the sequence! 题目链接 题意:给定多项式前s项,求出后c项,要求尽量小 思路:利用差分法,对原序列求s - 1次差分,就能够发现规律,然后对于每多 ...
- 【课程分享】基于plusgantt的项目管理系统实战开发(Spring3+JDBC+RMI的架构、自己定义工作流)
基于plusgantt的项目管理系统实战开发(Spring3+JDBC+RMI的架构.自己定义工作流) 课程讲师:张弘 课程分类:Java 适合人群:中级 课时数量:37课时 用到技术:Spring ...
- 在linux上创建nfs遇到的问题。
我们部署程序时,图片server是单独的一台server,有自己独立的域名.而应用部署在还有一台server上,我们使用一些附件上传工具.比方ajaxfileupload上传附件时是无法跨域訪问的. ...
- [LeetCode62]Unique Paths
题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...
- 设计模式-----观察者模式（Obsever）
它定义了对象之间一对多的依赖关系.因此,.当一个对象的状态变化,对吸毒成瘾者,他将收到通知和更新自己主动. 观察者模式的组成: 抽象主题角色:把全部对观察者对象的引用保存在一个集合中.抽象主题提供一个 ...
- bat(批处理文件)初步 第一篇 基本符号
近期我使用的一款软件中须要大量的环境变量设置,而我又不想讲这些变量都加入到系统的环境变量中,一方面是由于有一些同名的库文件的版本号却不一样,都 写在系统环境中会相互干扰:还有一方面则是大部分的路径仅仅 ...
- 【转】Robot Framework 快速入门
目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...