JSX语法

JSX语法

1.jsx的作用

react的作用：监听数据更新，帮助我们去渲染视图

render()函数实现了DOM的渲染的过程，这个过程我们可以分为两个阶段：

1. 获取虚拟DOM（JSX经过babel转译后的对象就是虚拟DOM）
2. 将虚拟DOM转化成真实DOM，并插入到HTML文档中

JSX javascript xml (xml 一般指的就是可扩展标记语言)

jsx是react提供的语法糖（syntax sugar）,能让我们在JS中去写HTML，在React中它的作用是描述UI，可以把它理解为虚拟DOM

2.jsx的基本语法

1. JSX只能有一个根标签
2. 不需要使用引号包裹
3. {/**/} 注释
4. {this.state.name} 插值表达式
5. jsx中可以是单标签，也可以是双标签，单标签必须闭合

jsx 中 null undefined boolean 不能被渲染的，如果需要显示，需要转换字符串
jsx中可以插入表达式，但是不可以插入语句

表达式最终会有返回值

绑定class className

要绑定style 在 {} 传入一个对象

jsx的本质其实就是React.createElement的语法糖

  {/*单行注释*/}
            {/*
            多行注释
            多行注释
            */}
            {/*插值表达式*/}
            <h1>{this.state.name}</h1>

  {/*数据渲染*/}
 
          // null undefined boolean 不能被渲染的，如果需要显示，需要转换字符串
          test: null,
          // 对象不能直接在jsx直接渲染，可以转换成字符串或者是直接调用

 			<h1>{this.state.test+''}</h1>
            <h1>{this.state.message.toString()}</h1>
 {/*三元表达式*/}
            <h1>{this.state.status ? '已登录' : '未登录'}</h1>
            {/*jsx中不能写if语句*/}

{/*绑定属性*/}
            {/*单标签必须要闭合*/}
            <img src={img} alt="" />
            <a href={url}>百度一下，你就知道</a>
            {/*绑定class jsx 不是html class className*/}
            <div className="div1">
              我是div1
            </div>

            {/*要绑定style 在 {} 传入一个对象*/}
            <div style={ {color:'red',fontSize:'20px'} }>我也是div</div>
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