使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
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页签切换效果:
把组件分解为三块, 第一块为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实现了一个鼠标移入的菜单栏效果:
把每一个菜单都单独作为一个组件, 可以很方便地实现组件的复用, 组件的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>
手风琴切换效果:
<!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页切换、菜单栏切换、手风琴切换和进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
这篇文章主要介绍了jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24- 这篇文章主要介绍了基于jQuery实现多标签页切换的效果(web前端开发)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
这篇文章主要介绍了JavaScript快速切换繁体中文和简体中文方法的相关资料,需要的朋友可以参考下...2016-03-09- 现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦...2021-04-05
- 这篇文章主要为大家详细介绍了如何实现有趣的bootstrap走动进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 进度条插件在GitHub上多种多样数量繁多,这总结出页面进度条插件的实现要点,来教大家自己动手制作基于jQuery的Web页面加载进度条插件...2016-06-12
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
本文结合实例给大家介绍如何实现内容滑动切换的效果,包括左右箭头切换,无限无缝滚动,圆点按钮切换,动画效果,自动切换效果,效果非常不错,感兴趣的朋友前来参考实现代码 ...2016-06-24php+ajax实现带进度条的上传图片功能【附demo源码下载】
这篇文章主要介绍了php+ajax实现带进度条的上传图片功能,涉及php文件传输及ajax无刷新提交的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下...2016-10-02- 在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法...2017-01-09
- 这篇文章主要分步解析JavaScript实现tab选项卡自动切换功能代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-26
- 这篇文章主要为大家介绍了javascript实现tab响应式切换特效,以一个完整的实例对tab响应式切换特效进行详细的分析,感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了BootStrap初学者对弹出框和进度条的使用感觉的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01
- 这篇文章主要介绍了基于jquery实现最简单的选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本文主要介绍了js实现音频控制进度条功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧...2017-04-03
PHP+apc+ajax实现的ajax_upload上传进度条代码
这篇文章主要介绍了PHP+apc+ajax实现的ajax_upload上传进度条代码,详细分析了apc模块的安装、设置及ajax调用实现上传进度条功能,需要的朋友可以参考下...2016-01-26