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

痛定思痛。 2022-09-01 13:57 142阅读 0赞

### 文章目录 ###

*   *  React学习:入门实例-学习笔记
     *   *  React的核心
         *  需要引入三个库
         *  什么是JSX
         *  react渲染三步骤

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### 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切换例子:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]

<!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][https_download.csdn.net_download_hhhmonkey_20623164]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/07a0839c09564a45819e93bb2cd29cd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/238eb00f42ca414385c4d2212af14581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/47a258f5e1384f75ad0a609ef057f176.png
[https_download.csdn.net_download_hhhmonkey_20623164]: https://download.csdn.net/download/hhhmonkey/20623164