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頁切換、菜單欄切換、手風琴切換和進度條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
