React —— 简介，虚拟DOM，JSX语法规则

绝地灬酷狼 2022-11-04 13:26 219阅读 0赞

### React —— 简介，虚拟DOM，JSX语法规则 ###

*  React —— 简介，虚拟DOM，JSX语法规则
 *   *  简介
     *   *  特点
         *  React 案例
     *  虚拟 DOM
     *   *  虚拟 DOM 的两种创建方式
         *   *   *  1. 使用js创建虚拟DOM
                 *  2. 使用jsx创建虚拟DOM
         *  虚拟 DOM 和 真实 DOM
         *  关于虚拟DOM
     *  JSX语法规则
     *   *  jsx语法规则
         *  JSX 小练习

# React —— 简介，虚拟DOM，JSX语法规则 #

## 简介 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]  
[React – A JavaScript library for building user interfaces][React _ A JavaScript library for building user interfaces].

[React 官方中文文档 – 用于构建用户界面的 JavaScript 库][React _ _ _ JavaScript].

### 特点 ###

1.  采用组件化模式，声明式编码，提高开发效率及组件复用率
2.  在 React Native 中可以用 React 语法进行移动端开发
3.  使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互

### React 案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>hello_react</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" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */ //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script>
    </body>
    </html>

1.  react.development.js 引入后多了一个全局对象 **React**

1.  react-dom.development.js 引入后多了一个全局对象 **ReactDOM**

1.  注意在使用JSX语法时，script 标签要选用 **babel**，对JSX进行编译

## 虚拟 DOM ##

### 虚拟 DOM 的两种创建方式 ###

##### 1. 使用js创建虚拟DOM #####

##### 2. 使用jsx创建虚拟DOM #####

### 虚拟 DOM 和 真实 DOM ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>3_虚拟DOM与真实DOM</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	<div id="demo"></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" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) const TDOM = document.getElementById('demo') console.log('虚拟DOM',VDOM); console.log('真实DOM',TDOM); console.log(typeof VDOM); console.log(VDOM instanceof Object); debugger; /* 关于虚拟DOM： 1.本质是Object类型的对象（一般对象） 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。 */ </script>
    </body>
    </html>

### 关于虚拟DOM ###

1. 创建虚拟DOM一定不要写引号，因为不是字符串
    
    2. 虚拟DOM最外层只允许有一个元素（参考VUE）
    
    3. 可以用（）将虚拟DOM作为一个整体括起来
    
    4. 虚拟DOM本质是Object类型的对象（一般对象）
    
    5. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
    
    6. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

## JSX语法规则 ##

### jsx语法规则 ###

1.定义虚拟DOM时，不要写引号。
    
    2.标签中混入JS表达式时要用{}。
    
    3.样式的类名指定不要用class，要用className。
    
    4.内联样式，要用style={
       {key:value}}的形式去写。
    
    5.只有一个根标签
    
    6.标签必须闭合
    
    7.标签首字母
    (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

![在这里插入图片描述][20210303190653365.png]

### JSX 小练习 ###

1.  这里要注意 \{ \} 里面只能写js表达式，不能写js语句
2.  一定注意区分：【js语句(代码)】与【js表达式】
3.      1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
         						下面这些都是表达式：
         								(1). a
         								(2). a+b
         								(3). demo(1)
         								(4). arr.map() 
         								(5). function test () {}
         			2.语句(代码)：
         						下面这些都是语句(代码)：
         								(1).if(){}
         								(2).for(){}
         								(3).switch(){case:xxxx}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]: /images/20221023/80cdd95de686406e9f803f6affcf30d5.png
[React _ A JavaScript library for building user interfaces]: https://reactjs.org/
[React _ _ _ JavaScript]: https://react.docschina.org/
[20210303190653365.png]: /images/20221023/e7646f99d9a04acab60abb90a8f4be74.png