使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果


Posted in Javascript onOctober 17, 2016

ReactJS是Facebook推出的产品。在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS。

ReactJS可以看做就是用来Render的。ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上。

前沿

对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学?, 反正内心是拒绝的, 这几天有空研究一下ReactJS,然后自己写了几个小案例, 发现和自己以前写的单向DOM数据流输出的效果差不多, 一个JS单向数据流动库----one way binding

使用React写了几个Demo以后, 发现React还是很好用的, 因为React的思维, 会强迫我们把JS的页面结构分解成各个模块和组件, 有利于模块的重用, 其实和angularJS中的指令是一个意思,但是React更专注于HTML的View;

但是唯一的遗憾是,如果页面的html结构改变比较大的话, 要重新修改各个组件的html, 这样是比较麻烦的;

使用React实现了一个tab页签切换效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

把组件分解为三块, 第一块为Tab,Tab这个组件包含了两个组件:Nav导航条组件和content内容组件, Tab组件包含了用户的点击事件, 以及子模块的状态, 子模块只要负责内容的渲染,不用关心逻辑, 个人感觉这种思路非常清晰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
.active{
color:#00ff00;
}
</style>
</head>
<body>
<div id="example">
</div>
<div id="example1"> 
</div>
<script type="text/babel">
var NavClass = React.createClass({
render : function() {
return (<div>
{this.props.navs.map((el,index)=>{
return (<button onClick={this.props.clk.bind(null,index)} className={this.props.index==index?"active":""} key={index}>{el}</button>)
})}
</div>);
}
})
var ContentsClass = React.createClass({
render : function() {
return (<div>
{this.props.contents.map((el, index)=>{
return (<span key={index} className={this.props.index==index?"active":""}>
{el}
</span>)
})}
</div>)
}
});
var Tab = React.createClass({
getInitialState : function() {
return {
index : 0
};
},
handleClick : function(index) {
console.log(this)
this.setState({
index : index
})
},
render : function() {
return (<div className="tabs">
<NavClass ref="nav" clk={this.handleClick} index={this.state.index} navs={this.props.navs} />
<ContentsClass ref="con" index={this.state.index} contents={this.props.contents} />
</div>)
}
});
var obj = {
navs : ["a","b","c"],
contents : ["内容a","内容bbbbb","内容ccccc"]
}
//console.time();
ReactDOM.render(
<Tab navs={obj.navs} contents={obj.contents}/>,
document.getElementById('example')
);
ReactDOM.render(
<Tab navs={obj.navs} contents={obj.contents}/>,
document.getElementById('example1')
);
// document.getElementById("example").innerHTML = '<div data-reactroot="" class="tabs"><div><button class="active">a</button><button class="">b</button><button class="">c</button></div><div><span class="active">aaaaa</span><span class="">bbbbb</span><span class="">ccccc</span></div></div>'
//console.timeEnd()
</script>
</body>
</html>

使用React实现了一个鼠标移入的菜单栏效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

把每一个菜单都单独作为一个组件, 可以很方便地实现组件的复用, 组件的open状态表示了该元素的菜单是否要显示, 每一个组件都有各自的状态,每一个组件不会相互影响;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.menus{
}
.menus .menu{
float:left;
margin-left:4px;
}
.menus .menu button{
padding:4px;
}
.menus ul.sub-menu{
background:#c1d2e3;
}
.menus ul li{
padding-left:4px;
}
</style>
</head>
<body>
<div id="example">
<!-- <div class="menus">
<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div> -->
</div>
<script type="text/babel">
var Menu = React.createClass({
mover : function() {
this.setState({
open : true
});
},
mout : function() {
this.setState({
open : false
});
},
getInitialState : function() {
return {
open : false
}
},
render : function() {
return (
<div className="menu">
<button onMouseOver={this.mover} onMouseOut={this.mout}>
{this.props.menuData.name}
</button>
<ul className="sub-menu" style={{display:this.state.open ? "block" : "none"}}>
{this.props.menuData.arr.map((el, index) => {
return (<div key={index}>{el}</div>)
})}
</ul>
</div>)
}
});
var Menus = React.createClass({
render : function() {
return (<div className="menus">
{this.props.data.map((el ,index)=>{
return (<Menu key={index} menuData={el}/>)
})}
</div>);
}
});
var data = [
{
name : "menuName",
arr : [
"menu1",
"menu2",
"menu3",
"menu4"
]
},
{
name : "menuName1111",
arr : [
"menu-1",
"menu-2",
"menu-3",
"menu-4"
]
}
];
ReactDOM.render(<Menus data={data} />, document.getElementById("example"));
</script>
</body>
</html>

手风琴切换效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
.accordion{
background:#f00;
height:400px;
}
.accordion .div{
float:left;
width:100%;
}
.accordion .title{
background:#0f0;
height: 20px;
line-height:20px;
cursor:pointer;
}
.accordion .content{
transition:height 1s;
height:0;
background:#00f;
overflow:auto;
}
.accordion .content.full{
height:320px;
}
.accordion:after{
clear:both;
content:"";
display:block;
}
</style>
</head>
<body>
<div id="example">
<!-- <div class="accordion">
<div class="div">
<div class="title">title</div>
<div class="content">content</div>
</div>
<div class="div">
<div class="title">title</div>
<div class="content">content</div>
</div>
<div class="div">
<div class="title">title</div>
<div class="content full">content</div>
</div>
<div class="div">
<div class="title">title</div>
<div class="content">content</div>
</div>
</div> -->
</div>
<script type="text/babel">
var AccordionDivComponent = React.createClass({
render : function() {
return (
<div className="div">
<div className="title" onClick={this.props.clk}>title</div>
<div className={"content "+(this.props.active ? "full" : "")} >content</div>
</div>
);
}
});
var Accordion = React.createClass({
getInitialState : function() {
return {
index : 0
}
},
handlClick : function(index , ev) {
this.setState({
index : index
})
},
render : function() {
return (<div className="accordion">
{this.props.data.map((el, index)=> {
return (<AccordionDivComponent active={this.state.index == index} clk={this.handlClick.bind(null,index)} key={index} />)
})}
</div>);
}
});
var arr = [
{
title : "title",
content : "content"
},
{
title : "title1",
content : "content1"
},
{
title : "title2",
content : "content2"
},
{
title : "title2",
content : "content2"
}
];
//console.time();
ReactDOM.render(
<Accordion data={arr}/>,
document.getElementById('example')
);
</script>
</body>
</html>

进度条效果:

进度条是一个组件, 启动一个定时器, 每100毫秒重新渲染界面;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
.process-bar{
border:1px solid #ccc;
height:20px;
border-radius:4px;
}
.process{
height:20px;
line-height:20px;
text-align:center;
background:#a1b2c3;
}
</style>
</head>
<body>
<div id="example">
<!-- <div class="process-bar">
<div class="process">
50%
</div>
</div> -->
</div>
<script type="text/babel">
var ProcessBar = React.createClass({
render : function() {
var width = parseInt(this.props.percent)+"%";
return (
<div className="process-bar">
<div className="process" style={{width:width}}>
{this.props.percent}%
</div>
</div>)
}
});
//直接渲染组件
//ReactDOM.render(<ProcessBar percent="40" />, document.getElementById("example"));
//启动一个组件和定时器, 每一百毫秒重新渲染组件;
var per = 0;
setInterval(function() {
per++;
if(per>=101)per=0;
ReactDOM.render(<ProcessBar percent={per} />, document.getElementById("example"));
},100)
</script>
</body>
</html>

以上所述是小编给大家介绍的使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
学习Node.js模块机制
Oct 17 #Javascript
微信小程序 火车票查询实例讲解
Oct 17 #Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 #Javascript
Node.js下自定义错误类型详解
Oct 17 #Javascript
js HTML5多媒体影音播放
Oct 17 #Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 #Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 #Javascript
You might like
example1.php
2006/10/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
Vue组件化开发思考
2018/02/02 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python-opencv 双线性插值实例
2020/01/17 Python
django ORM之values和annotate使用详解
2020/05/19 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
施工人员岗位职责
2013/12/12 职场文书
五年级数学教学反思
2014/02/11 职场文书
暑期研修感言
2014/02/17 职场文书
亲戚关系证明
2015/06/24 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
详解MindSpore自定义模型损失函数
2021/06/30 Python