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><!--定义一个容器用于存放虚拟DOM--><div id="example"></div><!--react渲染三步--><!--1、定义一个容器用于存放虚拟DOM   <div id="example"></div>2、创建虚拟DOM元素   var element=React.createElement('li',null,'2222')3、将虚拟DOM元素渲染到页面上  ReactDOM.render(element, document.getElementById('example'));--><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><!-- function Person(name,age){this.name = name;this.age = age;
};
Person.prototype.active = function(){console.log('说话')
};
var p = new Person('abc',18);class Person2{constructor(name,age){this.name = name;this.age = age;}active(){console.log('说话')}
}
var p2 = new Person2('xyz',20);
p2.active(); --><!-- class X{constructor() {this.x = 'x'}
}
class Y extends X{constructor() {super();   //关键字   this.y = 'y'}
}
var y = new Y();
y.x -->

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