React —— React 中的JSX语法

文章目录

• 一、什么是React
• 二、React 的特点
• 三、React第一个实例
• 四、JSX语法
• 1、 定义虚拟DOM时不要用引号。
• 2、标签混入JS表达式需要用{ }
• 3、className样式的类名
• 4、内联样式
• 5、只有一个根标签
• 6、标签必须闭合
• 7、 标签首字母
• 8、 js表达式

---

一、什么是React？

• React 是一个用于构建用户界面的 JAVASCRIPT 库。
• React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

二、React 的特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

高效的原因

·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。

·DOM Diffing算法,最小化页面重绘

说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、React第一个实例

那么React该如何使用呢？下面就通过一个小案例来学习吧！

1、虚拟DOM

概念

• · 本质时Object类型的对象(一般对象)
• · 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么    多的属性(只有React需要的属性) 
• · 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

2、JSX创建虚拟DOM

准备容器

引入react 文件

创建虚拟DOM

const V_DOM=React.createElement('h1',{id:'title'},'hello react!');
ReactDOM.render(V_DOM,document.getElementById("root"));//渲染到页面

四、JSX语法

JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。  

1、 定义虚拟DOM时不要用引号。

错误形式：

let V_DOM = ‘
hello,react
’

正确形式：

let V_DOM = 
hello,react

2、标签混入JS表达式需要用{ } 

举例：

let str  = "hello,react!";

let V_DOM = (

                      
{str}

)

3、className样式的类名

样式的类名指定不要用class,要用className

let V_DOM = (

        
我是文本内容

)

4、内联样式

要用style={{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。

let V_DOM = (

我是文本内容

 )

ReactDOM.render(V_DOM,document.getElementById("hello"));

5、只有一个根标签

错误形式：

 let V_DOM = (

我是文本内容

我是段落

 )

正确形式：

 // 定义虚拟dom 
        const V_DOM =(
            

            
姓名:{realname}
            
年龄:{age}
        
        )
        ReactDOM.render(V_DOM, document.getElementById('root'));

6、标签必须闭合

举例：

7、 标签首字母

·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。

·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。

8、 js表达式

一个表达式会产生一个值,可以放在任何一个需要值的地方，例如：

• · a
•  ·a+b
•  ·demo(1)
•  ·arr.map(
• )
•  ·function test(){}

语句:不能放在创建虚拟dom语句中

•   ·   if(){}
•   ·   for(){}
•   ·   switch(){}

四、小练习

需求： 遍历数组信息并输出到页面上