當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/1/23 编程问答 28 豆豆

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

文章目錄

- React學習:入門實例-學習筆記
- - React的核心
  - 需要引入三個庫
  - 什么是JSX
  - react渲染三步驟

React學習:入門實例-學習筆記

React的核心

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

需要引入三個庫

react.min.js React 的核心庫
react-dom.min.js 提供與 DOM 相關的功能
babel.min.js Babel 可以將 ES6 代碼轉為 ES5 代碼，對于不支持 ES6 瀏覽器上執行 React 代碼

什么是JSX

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

react渲染三步驟

1、定義一個容器用于存放虛擬DOM <div id="example"></div>
2、創建虛擬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多選項切換</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>一個專門從事購物的網站</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多選項切換</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>一個專門從事購物的網站</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多選項切換</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:'標題1',content:'內容1'},{title:'標題2',content:'內容2'},{title:'標題3',content:'內容3'},{title:'標題4',content:'內容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>一個專門從事購物的網站</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);}/*內容*/ #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個js文件下載（免積分）：
https://download.csdn.net/download/hhhmonkey/20623164

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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