React JSX語法

什么是React JSX

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

JS和JSX的區(qū)別

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

React使用JSX的有點

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

React JSX 中使用JS表達式

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

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

React JSX 中實現(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)那個結構，return那個結構，*/}{/* 注意，循環(huán)列表時加上一個獨一無二的值key  */}<ul>{List.map(item=><li key={item.id}>{item.name}</li>)}</ul></div>)
}
export default Home

key的作用：react框架內部，提升Dom操作的性能。

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

一條使用邏輯與，多條使用三元運算符

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

React JSX 復雜情況條件渲染

解決方案，自定義函數(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>{/* 通過調用函數(shù)渲染不同的模板 */}{getArticleTem()}</div>)
}
export default Home

React JSX事件綁定

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

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

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

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

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

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

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

React中的組件

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

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

一個簡單組件例子

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

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

完結~