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 颗星,受瞩目程度可见一斑. ...
随机推荐
- Autofac 入门
Autofac 入门文档 原文链接:http://docs.autofac.org/en/latest/getting-started/index.html 在程序中使用Autofac的基本模式是: ...
- Tian Ji -- The Horse Racin
Tian Ji -- The Horse Racin Problem Description Here is a famous story in Chinese history. "That ...
- 【Linux探索之旅】第一部分测试题
内容简介 1.第一部分测试题 2.第二部分第一课预告:终端Terminal,好戏上场 10道测试题 让我们选择开机时进哪个操作系统的软件叫什么? A. booter B. bootloader C. ...
- 在Windows基础上（硬盘）安装Linux操作系统（CentOS/RedHat）
注:该方法安装CentOS ,RedHat均没有问题,其它Linux操作系统,没有尝试过. 0.创建一个fat32的盘.我分了8G给这个盘,盘符为F.F盘以后的内存所有删除,作为未分配的内存.这个留用 ...
- Lua中的weak表——weak table（转）
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- Codeforces 437E The Child and Polygon(间隔DP)
题目链接:Codeforces 437E The Child and Polygon 题目大意:给出一个多边形,问说有多少种切割方法.将多边形切割为多个三角形. 解题思路:首先要理解向量叉积的性质,一 ...
- Chapter 1 Securing Your Server and Network(7):禁用SQL Server Browse
原文:Chapter 1 Securing Your Server and Network(7):禁用SQL Server Browse 原文出处:http://blog.csdn.net/dba_h ...
- [cocos2dx注意事项014]一个用于cocos2dx对象智能指针模板
现在,C++有许多实现智能指针,一个更无所谓.哈. 这种智能指针是专为cocos2dx 2.2.x自定义.主要的易用性,同时必须遵循现有的cocos2dx内存管理.特殊实现这样的智能指针.无需在使用时 ...
- KindEditor参数具体解释
width 编辑器的宽度.能够设置px或%.比textarea输入框样式表宽度优先度高. 数据类型: String 默认值: textarea输入框的宽度 演示样例: K.create('#id', ...
- android user如何打开一个版本号root才干
首先,你要确认你要打开adbd 的root 才干,或者让app 它有可能获得root 才干. (1). adbd 的root 才干 我们通常debug user 当问题的版本号, 或行为user ...