02.JSX语法

1.JSX的基本使用

1.1creatElement()的问题

``` 1.繁琐不简洁 2.不直观，无法一眼看出所描述的结构 3.不优雅，用户体验不爽 ```

1.2JSX简介

``` JSX是javsScript XML的简写，表示在javaScript代码中写XML(HTML)格式的代码 优势： 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率 JSX 是React 的核心内容 ```

1.3使用步骤

1.使用JSX语法创建react元素

``` //使用JSX 语法，创建react元素： const title =

Hello JSX

```

2.使用ReactDOM.render()方法渲染react元素到页面中

``` //渲染创建好的React元素 ReactDOM.render(title,root) ```

1.4注意点

1.react元素的属性名使用驼峰命名法

2.特殊属性名：class->className,for->htmlFor,tabindex->tableIndex

3.没有子节点的React元素可以用/>结束

4.推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

``` //使用小括号包裹JSX const dv = (

hello JSX

) ```

2.JSX中使用JavaScript表达式

嵌入JS表达式

数据存储在JS中

语法

``` {javaScript表达式} ``` ``` const name = 'jack' const dv = (

你好，我叫：{name}

) ```

注意点

``` //1.单大括号中可以使用任意的javaScript 表达式

//函数调用表达式
const sayHi = ()=>'hi'
const title=(

{sayHi()}

)
//2.JSX 自身也是JS 表达式
const h1 =

我是JSX

const dv = (

嵌入表达式：{h1}

)
//3.注意：JS中的对象是一个例外，一般只会出现在style属性中
//4.注意：不能在{}中出现语句（比如：if/for等）

<h2>3.JSX的条件渲染</h2>
<ul>
    <li>场景：loading效果</li>
     <li>条件渲染：根据条件渲染特定的JSX结构</li>
     <li>可以使用if/else或三元运算符或逻辑与运算符来实现</li>
</ul>

const isLoading = false
const loadData = ()=>{
if(isLoading){
return

loading...

}
return

数据加载完成，此处显示加载后的数据

}
const title = (

条件渲染：
{loadData()}

)

//三元表达式
const loadData = ()=>{
return isLoading?(

loading...

)😦

数据加载完成，此处显示加载后的数据

)
}
//逻辑与运算符
const loadData = ()=>{
//前面为true后面才执行
return isLoading && (

loading...

)
}

<h2>3.JSX的列表渲染</h2>
<p>如果要渲染一组数据，应该使用数组的map()方法</p>
<p>注意：渲染列表时应该添加key值，key属性的值要保证唯一</p>
<p>原则：map()遍历谁，就给谁添加key属性</p>
<p>注意：尽量避免使用索引号作为  key</p>

const songs = [
{id:1,name:'房间'}，
{id:2,name:'遥不可及的你'}，
{id:3,name:'像我这样的人'}，
]

const list = (

{songs.map(item=>
• {item.name}
)}

)

<h2>4.JSX的样式处理</h2>
<p>1.行内样式-style</p>

Jsx的样式处理

```

2.类名-className(推荐）

```

Jsx的样式处理

```

5.JSX的总结

``` 1.JSX 是React 的核心内容 2.JSX 表示在JS代码中写HTML结构，是React声明式的体现 3.使用JSX 配合嵌入式的JS表达式，条件渲染，列表渲染，可以描述任意UI结构 4.推荐使用className 的方式给JSX添加样式 5.React 完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能 ```