用ReactJS实现标签页切换、菜单栏切换、手风琴切换、进度条效果

ReactJS是脸书推出的产品。在2013年的Qcon大会(上海)上，脸书的前端工程师做了演讲，并介绍了ReactJS。

ReactJS可以视为用于渲染。ReactJS是游戏级渲染，fps可以保持在60左右，相当了不起。它制作了一个虚拟dom树来加快渲染过程，根据当时的数据，比angularjs快了20%以上。

边界

对于React，我是去年听说的，但是我不想学。前端的东西太多了，我学会了一个框架，一个新的框架要学。反正我心里不服。这几天有时间研究ReactJS，然后自己写了几个小案例。我发现单向DOM数据流的输出效果和JS的单向数据流库差不多。

用React写了几个Demo，发现React还是很有用的，因为React的思维会迫使我们把JS的页面结构分解成各种模块和组件，有利于模块的复用。其实和angularJS中的指令是一样的意思，只是React更侧重于HTML View；

但唯一遗憾的是，如果页面的html结构变化很大，再修改每个组件的html就麻烦了。

使用“反应”实现标签切换效果：

该组件分为三个部分。第一部分是Tab。选项卡组件包含两个组件：导航栏组件和内容组件。选项卡组件包含用户的点击事件和子模块的状态。子模块只负责呈现内容，不关心逻辑。个人觉得这个想法很明确。

！DOCTYPE htmlhtmlheartheta charset=' UTF-8 '/title react/title script src=' http :https://UNP kg.com/[email protected]/dist/react . js '/script script src=' http :https://UNP kg.com/[email protected]/dist/react-DOM . js '/script script src=' http :https://UNP kg.com/[email protected]/browser . min . js/。}/style/head dydiv id=' example '/div div id=' example 1 '/div script type=' text/babel ' var nav class=react . create class({ render : function(){ return(div { this . props . nav s . map((El，index)={ return(button OnClick={ this . props . clk . bind(null，index)} } class name={ this . props . index==index？active':''}键={ index } { El }/button)})}/div)；} })var contents class=react . create class({ render : function(){ return(div { this . props . contents . map)((El，index)={ return(span key={ index } class name={ this . props . index==index '？active ' : ' ' } { El }/span)})}/div)})；var Tab=react . createclass({ getInitialState : function(){ return { index : 0 }；}，handleClick :函数(index){ console . log(this)this . setstate({ index : index })}，render :函数(){ return(div class name=' tab ' nav class ref=' nav ' clk={ this . handleClick } index={ this . state . index } navs={ this . props . nav }/contents class ref=' con ' index={ this . state . index } contents={ this . props . contents }//div)})})；varobj={ nav s 3360[' a '，' b '，' c']，content s 3360[' content a '，' content bbbbb '，' content cccc ']}//console . time()；react DOM . render(Tab navs={ obj . navs } contents={ obj . contents }/，document.getElementById('示例'))；react DOM . render(Tab navs={ obj . navs } contents={ obj . contents }/，document . getelementbyid(' example 1 ')；//document.getElementById('示例')。innerHTML=' div data-React rot=' class=' tab ' div Button class=' active ' a/Button Button class=' b/Button Button class=' c/Button/div span class=' active ' AAAA a/span span class=' BBB/span span class=' cccc/span/div/div '/console . time end()/script/body/html使用React，实现了鼠标进入菜单栏的效果：

通过将每个菜单单独作为一个组件，可以轻松实现组件的重用。组件的打开状态表示该元素的菜单是否应该显示，每个组件都有自己的状态，各个组件不会相互影响；

！DOCTYPE html html heartheta charset=' UTF-8 '/title HellO React/title script src=' http :https://UNP kg。com/[电子邮件保护]/dist/React。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/dist/React-DOM。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/浏览器。量滴js .划水：0;} ul { list-style :无；}.菜单{}。菜单。菜单{ float:left边距-左侧：4 px}.菜单。菜单按钮{ padding:4px }。菜单ul。子菜单{背景： # c1d2e 3；}.菜单ul Li {左填充：4 px}/style/head dydiv id=' example '！-div class=' Menu ' div class=' Menu '按钮{按钮名称}/按钮ul class='子菜单li1/Lili 2/Lili 3/Lili 4/Li/ul/div class=' Menu '按钮{ button name }/button ul class='子菜单li1/Lili 2/Lili 3/Lili 4/Li/ul/div/div脚本类型=' text/babel ' var Menu=react。创建类({ Mover 3360 function(){ this。setstate({ open :}，mout : function(){ this。setstate({ open : false })；}，getInitialState : function(){ return { open : false } }，render : function(){ return(div类名=' menu ' button on mouseover={ this。Mover } onMouseOut={ this。道具。菜单数据。name }/button ul class name=' sub menu ' style={ { display : this。国家。打开？block ' : ' none ' } } { this。道具。门乌达塔。由…改编map((El，index)={ return(div key={ index } { El }/div)})}/ul/div)})；var菜单=反应。创建类({ render : function(){ return(div类名=' Menu ' { this。道具。数据。map((El，index)={ return(Menu键={ index } Menu data={ El }/)})}/div)；}});var data=[{name : 'menuName '，arr : ['menu1 '，' menu2 '，' menu3 '，' menu4']}，{name : 'menuName1111 '，arr : ['menu-1 '，' menu-2 '，' menu-3 '，' menu-4 ']}]；ReactDOM.render(菜单数据={data} /，document.getElementById('示例'));/脚本/正文/html手风琴切换效果：

！DOCTYPE html html heartheta charset=' UTF-8 '/title react/title script src=' http :https://UNP kg。com/[电子邮件保护]/dist/react。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/dist/react-DOM。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/浏览器。量滴js/.划水：0;}.手风琴{ background: # f00高度：400 px}.手风琴div { float:left宽度：100%;}.手风琴标题{ background : # 0f 0 height : 20px线高：20 px光标：指针指针；}.手风琴。内容{ transition:height 1s高度：0;背景技术# 00f飞越：汽车；}.手风琴内容。} .accord :后{ clear :两者；内容： " "；显示：块；}/style/head dydiv id=' example '！-div class=' accordion ' div class=' div ' div class=' title ' title/div class=' content ' content/div/div class=' content ' content/div/div class=' content full ' content/div/div class=' title/div class=' content ' content/div/div/div-' div脚本类型=' text/babel ' var ' full ' : ' ')} content/div/div)；}});var Accordion=react。create class({ getInitialState : function(){ return { index : 0 } }，handlick : function(index，ev){ this。setstate({ index : index })}，render : function(){ return(div类名='手风琴' { this。道具。数据。map((El，index)={ return(accordiondiv)组件活动={ this。国家。index==index } clk={ this。舔舔.}});var arr=[{title : 'title '，内容： 'content'}，{title : 'title1 '，内容： 'content1'}，{title : 'title2 '，内容： 'content2'}，{title : 'title2 '，内容： ' content 2 ' }]；//控制台。time()；ReactDOM.render(手风琴数据={arr}/，document.getElementById('示例'));/脚本/正文/html进度条效果：

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

！DOCTYPE html html heartheta charset=' UTF-8 '/title react/title script src=' http :https://UNP kg。com/[电子邮件保护]/dist/react。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/dist/react-DOM。js '/script script src=' http :https://UNP kg。com/[电子邮件保护]/浏览器。量滴js/.高度：20 px边界半径：4 px}.流程{高：20像素线高：20 px文本对齐：居中；背景技术# a1b2c 3 }/style/head dydiv id=' example '！-div class=' process-bar ' div class=' process ' 50%/div/div-/div脚本类型=' text/babel ' var process bar=react。创建类({ render : function(){ var width=parsent(this。道具。百分比)' % '；返回(div类名='进程条' div类名=“process”样式={ { width : width } } { this。道具。百分比} %/div/div)})；//直接渲染组件//反应DOM。渲染(进程条百分比=' 40 '/文档。getelementbyid('示例'));//启动一个组件和定时器，每一百毫秒重新渲染组件；var per=0；setInterval(函数(){ perif(per=101)per=0；对DOM做出反应。render(进程条百分比={ per }/，document.getElementById('示例'));},100)/脚本/正文/html以上所述是小编给大家介绍的使用ReactJS实现标签页切换、菜单栏切换、手风琴切换和进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！