React JSX語法

什么是React JSX

JSX（javascript xml）
就是JavaScript和XML結(jié)合的一種格式，是JavaScript的語法擴(kuò)展，只要把HTML代碼寫在JS中，就為JSX。用于動態(tài)構(gòu)建用戶界面的Javascript庫，發(fā)送請求獲取數(shù)據(jù)，處理數(shù)據(jù)，過濾，整理格式，操作DOM呈現(xiàn)頁面，React是一個(gè)將數(shù)據(jù)渲染為HTML視圖的開源JavaScript庫。

JS和JSX的區(qū)別

原生JavaScript操作DOM繁瑣，效率低，使用Javascript直接操作Dom，瀏覽器會進(jìn)行大量的重繪重排，原生JavaScript沒有組件化的編碼方案，代碼復(fù)用率比較低。
JS是直接寫在下·XML的語法，每個(gè)XML標(biāo)簽都會被JSX工具轉(zhuǎn)換成純JS代碼，使用JSX可以使組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加的清晰，JS是原生寫法，需要通過script標(biāo)簽引入。

React使用JSX的有點(diǎn)

• JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行優(yōu)化。
• 它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。
• 聲明式語法更加直觀，與HTML結(jié)構(gòu)相同，降低了學(xué)習(xí)成本，提升開發(fā)效率。
• JSX語法中一定要有一個(gè)定義元素包裹，否則編譯報(bào)錯(cuò)，程序不能運(yùn)行。

React JSX 中使用JS表達(dá)式

再JSX中通過大括號語法{}識別javaScript中的表達(dá)式，比如常見的變量，函數(shù)調(diào)用，方法調(diào)用等等

1. 使用引號傳遞字符串。
2. 使用JavaScript變量。
3. 函數(shù)調(diào)用和方法調(diào)用。
4. 使用JavaScript對象。
   

React JSX 中實(shí)現(xiàn)列表渲染

語法：再JSX中可以使用原生的JS中的map方法遍歷渲染列表。

const List = [{id:"01",name:"vue2"},{id:"02",name:"React"},{id:"03",name:"eachers"},{id:"04",name:"vue3"},
]
function Home(){return(<div>{/* map循環(huán)那個(gè)結(jié)構(gòu)，return那個(gè)結(jié)構(gòu)，*/}{/* 注意，循環(huán)列表時(shí)加上一個(gè)獨(dú)一無二的值key  */}<ul>{List.map(item=><li key={item.id}>{item.name}</li>)}</ul></div>)
}
export default Home

key的作用：react框架內(nèi)部，提升Dom操作的性能。

React JSX 中實(shí)現(xiàn)條件渲染

一條使用邏輯與，多條使用三元運(yùn)算符

const isLogin = true
function Home(){return(<div>{/* 邏輯與 */}{isLogin && <span>this is span</span>}{/* 三元運(yùn)算符 */}{isLogin ? <span>jack</span>:<span>loading...</span>}</div>)
}
export default Home

React JSX 復(fù)雜情況條件渲染

解決方案，自定義函數(shù)和自定義語句

const articalType = 1 //0 1 2
// 定義核心函數(shù)，根據(jù)文章類型返回不同的JSX模板
function getArticleTem(){if(articalType === 0){return <div>我是無圖文章</div>}else if(articalType===1){return <div>我是單圖模式</div>}else{return <div>我是三圖模式</div>}
}
function Home(){return(<div>{/* 通過調(diào)用函數(shù)渲染不同的模板 */}{getArticleTem()}</div>)
}
export default Home

React JSX事件綁定

語法： on + 事件名稱 = {事件處理程序}

1.點(diǎn)擊觸發(fā)并且拿到參數(shù)e

function Home(){const handleClik = (e)=>{console.log("button被點(diǎn)擊了",e)}return(<div><button onClick={handleClik}>click me</button></div>)
}
export default Home

2. 傳遞自定義參數(shù) 事件綁定的位置該找成箭頭函數(shù)的寫法， 在執(zhí)行click實(shí)際處理業(yè)務(wù)函數(shù)的時(shí)候傳遞實(shí)參。

function Home(){//傳遞自定義參數(shù)const handleClik = (name)=>{console.log("button被點(diǎn)擊了",name)}return(<div><button onClick={()=>handleClik("jack")}>click me</button></div>)
}
export default Home

3. 同時(shí)傳遞事件對象和自定義參數(shù)，在事件綁定的位置傳遞實(shí)參e和自定義參數(shù)，handleClick中生命形參，注意順序?qū)?yīng)。

function Home(){//既要傳遞自定義參數(shù)，而且還要傳遞事件對象econst handleClik = (name,e)=>{console.log("button被點(diǎn)擊了",name,e)}return(<div><button onClick={(e)=>handleClik("jack",e)}>click me</button></div>)
}
export default Home

React中的組件

概念：
一個(gè)組件就是用戶界面的一部分，它可以有自己的邏輯和外觀，組件之間可以互相嵌套，可以以復(fù)用多次。組件化開發(fā)可以讓開發(fā)者像搭積木一樣搭建一個(gè)龐大的項(xiàng)目。

React中，一個(gè)組件就是首字母大寫的函數(shù)，內(nèi)部存放了組建的邏輯和視圖UI，渲染組件只需要把組件當(dāng)成標(biāo)簽書寫即可。

一個(gè)簡單組件例子

function Home(){return(<div>{/* 自閉和 */}<Button />{/* 成對標(biāo)簽 */}<Button></Button></div>)
}
function Button(){// 組件內(nèi)部邏輯return <button>click me</button>
}
export default Home

也可以將組件寫成箭頭函數(shù)形式。

完結(jié)~