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 颗星,受瞩目程度可见一斑. ...
随机推荐
- delegate实现Javascript的each方法
C#如何用delegate实现Javascript的each方法 C#中有很多易混淆的关键词,例如delegate,Func, Action和 Predicate.Func, Action和 Pr ...
- 解决iOS app集成共享QQ场地，微信的朋友，朋友等功能圈，不能采用苹果公司的审计问题
最近提交的应用程序App Store时刻,由于App综合QQ登录.份额QQ场地.微信等功能.被拒绝.很郁闷:在最佳.想想办法,这个问题是可以解决. 当共享平台列表显示.根据推断当前设备被安装在一节Ap ...
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- java反射机制性能优化
import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; import java.uti ...
- JAVA Socket超时浅析（转）
套接字或插座(socket)是一种软件形式的抽象,用于表达两台机器间一个连接的“终端”.针对一个特定的连接,每台机器上都有一个“套接字”,可以想象它们之间有一条虚拟的“线缆”.JAVA有两个基于数据流 ...
- Java模式(适配器型号)
今天阅读Java该适配器模式,这里有一个小的总结和下谈感受.对于将来使用. 首先.让我们有关适配器先说说. 适应是“来源”至“目标”适应.其中连接这两个的关系是适配器.它负责“源”过度到“目标”. 举 ...
- Apple Watch 1.0 开发介绍 1.2 简介 配置Xcode工程
WatchKit app需要一个现有的iOS app.在iOS app工程中,添加一个新的WatchKit app target,它包含了WatchKit app和WatchKit extension ...
- Android - 用Fragments实现动态UI - 创建灵活的UI
当设计程序来支持各种不一样的屏幕尺寸时,可以在不同的布局中重用fragment来根据可用的屏幕大小来优化用户体验. 例如,在手机上可能使用一个fragment来使用单窗口用户体验比较合适.但是,你可能 ...
- MVC下判断用户登录和授权状态方法
MVC下判断用户登录和授权状态方法 在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization ...
- JGroups 入门实践(转)
前言 JGroups是一个开源的纯java编写的可靠的群组通讯工具.其工作模式基于IP多播,但可以在可靠性和群组成员管理上进行扩展.其结构上设计灵活,提供了一种灵活兼容多种协议的协议栈. JGroup ...