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.注意點
-
react元素的屬性名使用駝峯命名法
-
特殊屬性名：class->className,for->htmlFor,tabindex->tableIndex
-
沒有子節點的React元素可以用/>結束
-
推薦：使用小括號包裹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的列表渲染
- 如果要渲染一組數據，應該使用數組的map()方法
- 注意：渲染列表時應該添加key值，key屬性的值要保證唯一
- 原則：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>
)
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功能