第一章:React入门
1.1 React简介
1.1.1 官网
中文官网: https://react.docschina.org/
英文官网: https://reactjs.org/
1.1.2 介绍描述
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源
1.1.3 React特点
声明式编码
组件化编码
React Native 编写原生应用
高效(优秀的Diffing算法)
1.1.4 React高效的原因
使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。
1.2 React的基本使用
相关js库
react.js:React核心库。
react-dom.js:提供操作DOM的react扩展库。
babel.min.js:解析JSX语法代码转为JS代码的库
创建虚拟dom的两种方式
1.纯js方式(一般不使用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_使用js创建虚拟DOM</title> </head> <body> <div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" > const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React')) ReactDOM.render(VDOM,document.getElementById('test')) </script> </body> </html>
|
2.jsx方式
<script type="text/babel" > /* 此处一定要写babel */
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_使用jsx创建虚拟DOM</title> </head> <body> <div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > const VDOM = ( <h1 id="title"> <span>Hello,React</span> </h1> ) ReactDOM.render(VDOM,document.getElementById('test')) </script> </body> </html>
|
1.3 React JSX
jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}
的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </style> </head> <body> <div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > const myId = 'aTgUiGu' const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span> </h2> <h2 className="title" id={myId.toUpperCase()}> <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span> </h2> <input type="text"/> </div> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test'))
/* jsx语法规则: 1.定义虚拟DOM时,不要写引号。 2.标签中混入JS表达式时要用{}。 3.样式的类名指定不要用class,要用className。 4.内联样式,要用style={{key:value}}的形式去写。 5.只有一个根标签 6.标签必须闭合 7.标签首字母 (1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。 (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
*/ </script> </body> </html>
|
1.4 组件
1.4.1 函数式组件
组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_函数式组件</title> </head> <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> function MyComponent(){ console.log(this); return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script> </body> </html>
|
执行了ReactDOM.render(<MyComponent/>
…….之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
1.4.2 类式组件
类的基本知识复习:
1.类中的构造器不是必须要写的,要对实例进行一些初始化的操作,如添加指定属性时才写。
2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的。
3.类中所定义的方法,都放在了类的原型对象上,供实例去使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_类的基本知识</title> </head> <body> <script type="text/javascript" >
class Person { constructor(name,age){ this.name = name this.age = age } speak(){ console.log(`我叫${this.name},我年龄是${this.age}`); } }
class Student extends Person { constructor(name,age,grade){ super(name,age) this.grade = grade this.school = '尚硅谷' } speak(){ console.log(`我叫${this.name},我年龄是${this.age},我读的是${this.grade}年级`); this.study() } study(){ console.log('我很努力的学习'); } } class Car { constructor(name,price){ this.name = name this.price = price } a = 1 wheel = 4 static demo = 100 } const c1 = new Car('奔驰c63',199) console.log(c1); console.log(Car.demo); </script> </body> </html>
|
类式组件:
执行了ReactDOM.render(<MyComponent/>
…….之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
render中的this是谁?—— MyComponent的实例对象 <=> MyComponent组件实例对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_类式组件</title> </head> <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> class MyComponent extends React.Component { render(){ console.log('render中的this:',this); return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2> } } ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script> </body> </html>
|
1.5 组件实例的三大核心属性 1.state
组件实例上的三大属性,所以直接将function组件直接pass掉。