2.JSX的基本使用

1.creatElement()的问题

---

 

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

2.JSX简介

---

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

3.使用步骤

---

 

• 使用JSX语法创建react元素

const title = <h1>Hello JSX</h1>

 

• 使用ReactDOM.render()方法渲染react元素到页面中
• 渲染创建好的React元素

ReactDOM.render(title,root)

4.注意点

---

 

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

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

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

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

const dv = (<div>hello JSX</div>)

5JSX中使用JavaScript表达式

---

 

• 嵌入JS表达式

数据存储在JS中
语法

{javaScript表达式}


const name = 'jack'
const dv = (
    <div>你好，我叫：{name}</div>
)

注意点

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

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

2.JSX 自身也是JS 表达式

const h1 = <h1>我是JSX</h1>
const dv = (
    <div>嵌入表达式：{h1}</div>
)

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

6.JSX的条件渲染

---

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

const isLoading = false
const loadData = ()=>{
    if(isLoading){
        return <div>loading...</div>
    }
    return <div>数据加载完成，此处显示加载后的数据</div>
}
const title = (
    <h1>
        条件渲染：
       {loadData()}
    </h1>
)

 

• 三元表达式

const loadData = ()=>{
    return isLoading?(<div>loading...</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
}

 

• 逻辑与运算符

const loadData = ()=>{
    //前面为true后面才执行
    return isLoading && (<div>loading...</div>)
}

7.JSX的列表渲染

---

 

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

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

const list = (
    <ul>
        {songs.map(item=><li key={item.id}>{item.name}</li>)}
    </ul>
)

8.JSX的样式处理

---

 

• 行内样式-style

<h1 style={{color:'red',backgroundColor:'skyblue'}}>
    Jsx的样式处理
</h1>

 

• 类名-className(推荐)

<h1 className='title'>
    Jsx的样式处理
</h1>

9.JSX的总结

---

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