快捷導(dǎo)航

使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果

更新時(shí)間：2016年10月17日 14:43:39 作者：方方和圓圓

這篇文章主要介紹了使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

ReactJS是Facebook推出的產(chǎn)品。在2013年的Qcon大會(huì)(上海)上面，當(dāng)時(shí)Facebook的前端工程師做過一次講座，就專門介紹了ReactJS。

ReactJS可以看做就是用來(lái)Render的。ReactJS是可以達(dá)到游戲級(jí)別的渲染，fps可以保持在60左右，相當(dāng)?shù)牧瞬黄穑隽艘粋€(gè)虛擬dom tree加速了渲染過程，根據(jù)當(dāng)時(shí)的數(shù)據(jù)說(shuō)比angularjs快20%以上。

前沿

　　對(duì)于React，去年就有耳聞，挺不想學(xué)的，前端那么多東西，學(xué)了一個(gè)框架又有新框架要學(xué)👿，反正內(nèi)心是拒絕的，這幾天有空研究一下ReactJS，然后自己寫了幾個(gè)小案例，發(fā)現(xiàn)和自己以前寫的單向DOM數(shù)據(jù)流輸出的效果差不多，一個(gè)JS單向數(shù)據(jù)流動(dòng)庫(kù)----one way binding

　　使用React寫了幾個(gè)Demo以后，發(fā)現(xiàn)React還是很好用的，因?yàn)镽eact的思維，會(huì)強(qiáng)迫我們把JS的頁(yè)面結(jié)構(gòu)分解成各個(gè)模塊和組件，有利于模塊的重用，其實(shí)和angularJS中的指令是一個(gè)意思，但是React更專注于HTML的View；

　　但是唯一的遺憾是，如果頁(yè)面的html結(jié)構(gòu)改變比較大的話，要重新修改各個(gè)組件的html，這樣是比較麻煩的；

　　使用React實(shí)現(xiàn)了一個(gè)tab頁(yè)簽切換效果：

　　把組件分解為三塊，第一塊為Tab，Tab這個(gè)組件包含了兩個(gè)組件：Nav導(dǎo)航條組件和content內(nèi)容組件， Tab組件包含了用戶的點(diǎn)擊事件，以及子模塊的狀態(tài)，子模塊只要負(fù)責(zé)內(nèi)容的渲染，不用關(guān)心邏輯，個(gè)人感覺這種思路非常清晰

<!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 : ["內(nèi)容a","內(nèi)容bbbbb","內(nèi)容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實(shí)現(xiàn)了一個(gè)鼠標(biāo)移入的菜單欄效果：

　　把每一個(gè)菜單都單獨(dú)作為一個(gè)組件，可以很方便地實(shí)現(xiàn)組件的復(fù)用，組件的open狀態(tài)表示了該元素的菜單是否要顯示，每一個(gè)組件都有各自的狀態(tài)，每一個(gè)組件不會(huì)相互影響；

<!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>

　　手風(fēng)琴切換效果：

<!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>

　　進(jìn)度條效果：

　　進(jìn)度條是一個(gè)組件，啟動(dòng)一個(gè)定時(shí)器，每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"));
//啟動(dòng)一個(gè)組件和定時(shí)器， 每一百毫秒重新渲染組件；
var per = 0;
setInterval(function() {
per++;
if(per>=101)per=0;
ReactDOM.render(<ProcessBar percent={per} />, document.getElementById("example"));
},100)
</script>
</body>
</html>

以上所述是小編給大家介紹的使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: