當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React学习:入门实例-学习笔记

發(fā)布時(shí)間：2024/1/23 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 React学习:入门实例-学习笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- React學(xué)習(xí):入門實(shí)例-學(xué)習(xí)筆記
- - React的核心
  - 需要引入三個(gè)庫
  - 什么是JSX
  - react渲染三步驟

React學(xué)習(xí):入門實(shí)例-學(xué)習(xí)筆記

React的核心

1、組件化：把整一個(gè)網(wǎng)頁的拆分成一個(gè)個(gè)區(qū)塊，每個(gè)區(qū)塊我們可以看作成一個(gè)組件。網(wǎng)頁由多個(gè)組件拼接或者嵌套組成
2、虛擬DOM：為了實(shí)現(xiàn)頁面中DOM元素的高效更新
DOM和虛擬DOM的區(qū)別:
DOM: 瀏覽器中，提供的概念，用JS對(duì)象，標(biāo)識(shí)頁面上的元素，并提供了操作元素的API
虛擬DOM: 是框架的概念; 而是開發(fā)框架的程序員，手動(dòng)用JS對(duì)象來模擬DOM元素和嵌套關(guān)系；
本質(zhì)：用JS對(duì)象，來模擬DOM元素和嵌套關(guān)系
目的：就是為了實(shí)現(xiàn)頁面元素的高效更新
3、DIFF算法：新舊兩顆DOM樹，逐層對(duì)比的過程，就是Tree Diff;當(dāng)整頓DOM逐層對(duì)比完畢，則所有需要背按需更新的元素，必然能夠找到

需要引入三個(gè)庫

react.min.js React 的核心庫
react-dom.min.js 提供與 DOM 相關(guān)的功能
babel.min.js Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，對(duì)于不支持 ES6 瀏覽器上執(zhí)行 React 代碼

什么是JSX

在React的開發(fā)中，會(huì)經(jīng)常使用一種特殊的語法來描述 React 的組件，叫做JSX，雖然它看上去像是一種模板語言，但是其實(shí)它是一種語法糖。
JSX 的特點(diǎn)是能夠讓開發(fā)者在JavaScript代碼中直接寫HTML的標(biāo)記，這也是 React 推出時(shí)最受爭議的一點(diǎn)，就是如何去把 UI 的描述放到代碼中。

react渲染三步驟

1、定義一個(gè)容器用于存放虛擬DOM <div id="example"></div>
2、創(chuàng)建虛擬DOM元素 var element=React.createElement('li',null,'2222')
3、將虛擬DOM元素渲染到頁面上 ReactDom.render(element, document.getElementById('example'));

代碼示例:

<!DOCTYPE html> <html><head><title>hello</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script type="text/javascript" src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">window.onload = function(){//<div class="div">hello world</div>//var div = React.createElement('div',{className:'div'},'world123');//JSX// var str = '999';// var arr = [{id:1,msg:'消息1'},{id:2,msg:'消息2'},{id:3,msg:'消息3'}];// //var div2 = <div className="div2 aaa">hello world {str}</div>;// ReactDOM.render(// // div2, // <div>// {// arr.map(function(item,index){// return <p key={index}>{item.msg}</p>// })// }// </div>,// document.getElementById('example'));//組件class Hello extends React.Component{render(){return <h1>hello</h1>}};ReactDOM.render(<Hello/>,document.getElementById('example'));}</script></body> </html>

tab切換例子:

<!DOCTYPE html> <html><head><title>react-tab多選項(xiàng)切換</title><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link href="css/index.css" rel="stylesheet"><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script type="text/javascript" src="js/babel.min.js"></script></head><body><div id="app"></div><script type="text/babel">window.onload = function(){//組件class TabOne extends React.Component{render(){return (<div><ul><li>11111</li><li>11111</li><li>11111</li></ul></div>)}}class TabTwo extends React.Component{render(){return (<div><ul><li>2222222</li><li>2222222</li><li>2222222</li></ul></div>)}}//組件class Tab extends React.Component{constructor(){super();this.state = { //等同于vue datas:true}}/*change(type){if(type==1){this.setState({s:true})}else {this.setState({s:false})}}*/change(i){this.setState({s:i})}demo(s){if(s==1){return <TabOne />}else if(s==2){return <TabTwo />}// switch(s) {// case 1:// return <TabOne />// }}render(){var s = this.state.s;return (<div id="layout"><div id="menu"><div className="menu-main"><a className={s?"menu-selected":''} onClick={()=>this.change('1')}>女裝/男裝</a><a className={!s?"menu-selected":''} onClick={()=>this.change('2')}>酒類/生鮮</a></div></div><div id="main"><div className="content"><h2>一個(gè)專門從事購物的網(wǎng)站</h2><div><p>年輕人迷茫的的原因——在本該拼搏的年齡，想的太多，做的太少</p>//{s ?<TabOne />:<TabTwo />} //方式1{this.demo(s)} //方式2</div></div></div></div>)}};ReactDOM.render(<Tab/>,document.getElementById('app'));}</script></body> </html> <!DOCTYPE html> <html><head><title>react-tab多選項(xiàng)切換</title><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link href="css/index.css" rel="stylesheet"><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script type="text/javascript" src="js/babel.min.js"></script></head><body><div id="app"></div><script type="text/babel">window.onload = function(){//組件class ListInfo extends React.Component{ //方式3 通過公共組件傳遞render(){if(this.props.num==1){return <h1>1111111</h1>}else if(this.props.num==2){return <TabTwo />}}}class TabOne extends React.Component{render(){return (<div><ul><li>11111</li><li>11111</li></ul></div>)}}class TabTwo extends React.Component{render(){return (<div><ul><li>2222222</li><li>2222222</li></ul></div>)}}//組件class Tab extends React.Component{constructor(){super();this.state = { //等同于vue datas:1}}change(i){this.setState({s:i})}render(){var {s} = this.state;return (<div id="layout"><div id="menu"><div className="menu-main"><a className={s==1?"menu-selected":''} onClick={()=>this.change(1)}>女裝/男裝</a><a className={s==2?"menu-selected":''} onClick={()=>this.change(2)}>酒類/生鮮1</a><a className={s==3?"menu-selected":''} onClick={()=>this.change(3)}>酒類/生鮮2</a><a className={s==4?"menu-selected":''} onClick={()=>this.change(4)}>酒類/生鮮3</a></div></div><div id="main"><div className="content"><h2>一個(gè)專門從事購物的網(wǎng)站</h2><div><p>年輕人迷茫的的原因——在本該拼搏的年齡，想的太多，做的太少</p><ListInfo num={s} /></div></div></div></div>)}};ReactDOM.render(<Tab/>,document.getElementById('app'));}</script></body> </html> <!DOCTYPE html> <html><head><title>react-tab多選項(xiàng)切換</title><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link href="css/index.css" rel="stylesheet"><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script type="text/javascript" src="js/babel.min.js"></script></head><body><div id="app"></div><script type="text/babel">window.onload = function(){//組件class ListInfo extends React.Component{render(){if(this.props.num==0){return <h1>1111111</h1>}else if(this.props.num==1){return <TabTwo />}}}class TabOne extends React.Component{render(){return (<div><ul><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li></ul></div>)}}class TabTwo extends React.Component{render(){return (<div><ul><li>2222222</li><li>2222222</li><li>2222222</li><li>2222222</li><li>2222222</li><li>2222222</li></ul></div>)}}//組件class Tab extends React.Component{constructor(){super();this.state = { //等同于vue datas:1,lists:[{title:'標(biāo)題1',content:'內(nèi)容1'},{title:'標(biāo)題2',content:'內(nèi)容2'},{title:'標(biāo)題3',content:'內(nèi)容3'},{title:'標(biāo)題4',content:'內(nèi)容4'}]}}change(i){this.setState({s:i})}render(){//var self = this;var {s,lists} = this.state;var list = lists.map((item,index)=>{return <a className={s==index?"menu-selected":''} key={index}onClick={()=>this.change(index)}>{item.title}</a>});return (<div id="layout"><div id="menu"><div className="menu-main">{list}</div></div><div id="main"><div className="content"><h2>一個(gè)專門從事購物的網(wǎng)站</h2><div><p>年輕人迷茫的的原因——在本該拼搏的年齡，想的太多，做的太少</p>{lists.map((item,index)=>{return (index==s ?<div key={index}>{item.content}</div>:'')})}<ListInfo num={s} /></div></div></div></div>)}};ReactDOM.render(<Tab/>,document.getElementById('app'));}</script></body> </html>

index.css文件:

body {width:100%;height:100%;background:url(../img/bg.jpg) no-repeat top center;background-size:cover;color: #fff;position:relative;overflow:hidden; } body,html{width:100%; height:100%;padding: 0;margin: 0; } a {text-decoration: none;color: #777; }ul {list-style: none; }#layout {padding-left: 150px; height: 100%; } #main {height: 100%; } #menu {margin-left: 0; width: 150px;position: fixed;top: 0;left: 0;bottom: 0;background: rgba(0,0,0,.7);overflow-y: auto; }#menu a {color: #fff;display: block;padding: 15%;border-bottom: 1px solid rgba(255,255,255,.1);}#menu .menu-selected {background: rgba(246,73,74,.8);}/*內(nèi)容*/ #main {margin:5%;text-align:center; } .content {margin: 0 auto;padding: 0 2rem; } .content .table{width:100%;border-collapse: collapse; } .content .table td, .content .table th{border: 1px solid #ddd; }

所需的3個(gè)js文件下載（免積分）：
https://download.csdn.net/download/hhhmonkey/20623164

總結(jié)

以上是生活随笔為你收集整理的React学习:入门实例-学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：前端必备-防抖节流
下一篇： React学习:事件绑定、组件定义、fo