React中的jsx

1.jsx的基本使用

1.1 createElement()的问题

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

1.2 JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。

** JSX是React的核心内容**

1.3 使用步骤

1.使用JSX创建react元素

const title = <h1>Hello JSX<span>这是span</span></h1>

2.渲染react元素
ReactDOM.render(title, document.getElementById(‘root’))

1.4 注意点

1.React元素的属性名使用驼峰命名法
2.特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex
3.没有子节点的React元素可以用/>结束。
4.推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。

const title = (
<h1 className="title">
  Hello JSX
  <span>这是span</span>
  </h1>
)

2.JSX中使用JavaScript表达式

嵌入JS表达式
数据存储在js中
语法：{JavaScript表达式}

const name = 'jack'
const age = 19
const title = (
<h1 className="title">
  Hello JSX,{name},年龄：{age}
  <span>这是span</span>
  </h1>
)

3.JSX的条件渲染

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

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

  // 三元运算符
  // return isLoading? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)

  // 逻辑与运算符
  return isLoading && (<div>loading...</div>)
}

const title = (
  <h1>
    条件渲染：
    {loadData()}
  </h1>
)

ReactDOM.render(title, document.getElementById('root'))

4.JSX的列表渲染

如果要渲染一组数据，应该使用数组的map()方法
注意：尽量避免使用索引号作为key，要保证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>
)

ReactDOM.render(list, document.getElementById('root'))

5.JSX的样式处理

1.行内样式 --style

const list = (
  <h1 style={{color:'pink',backgroundColor:'greenyellow'}}>
    JSX的样式处理
  </h1>
)

2.类名-- className（推荐）

import './css/index.css'