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 data
s: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 data
s: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 data
s: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
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
