1 簡介
jsx(JavaScript XML)，即可拓展的JavaScript，是react定義的一種類似于XML的js擴展語法:JS+XML，它本質上是React.createElement(type，config，...children)的語法糖,主要用于創建React元素，生成虛擬DOM
2 使用jsx
可以使用react腳手架或者引入react與babel相關腳本來體驗jsx，
這里主要介紹一下后者如何使用
3 jsx語法規則
jsx包括xml格式的標簽和jsx運算式{}，下面從這兩個角度來介紹jsx的語法規則
標簽規則
- 根標簽單一且閉合,否則拋出例外
- 標簽類名使用className而非class，行內樣式的屬性名采用小駝峰形式命名
const FC = () => (
<h1 className="font-red">
hello react
<span style={{ color: 'blue' }} onClick={() => { alert('click span') }}>inner text</span>
</h1>
)
- 標簽屬性都可以使用jsx運算式{},只有字串可以省略大括號
<h1 className="font-red">
hello react
</h1>
jsx運算式規則
- {}中必須回傳一個值
- 基于1,流程控制與回圈陳述句陳述句如if、for是不允許的,因為他們默認沒有回傳值,而邏輯運算子如&&、||、三元運算式是允許的,函式也是允許的,因為它們一定會回傳一個值，因此jsx中做邏輯判斷的時候考慮使用后者，
- 基于2,如果一定要使用if、for,考慮在jsx運算式中使用IIFE
<input type="text" value=https://www.cnblogs.com/ltfxy/archive/2022/04/11/{((type)=>{
if(type === 1){
return'one'
}else if(type === 2){
return 'two'
}else{
return ''
}
})(type)} />
- 對于falsy值，0會被正常渲染到頁面，而false,true,null,undefined不會，如果一定要渲染它們，請先轉換成字串，
// 比如下面這段代碼會在頁面上顯示一個不符合期望的0
const FC2 = ({arr}) => <span>{arr.length && arr.join()}</span>
ReactDOM.render(<FC2 arr={[]} />, document.getElementById('app'))
4 jsx優缺點
4.1 優點
js語法在運行時靈活的特性
基于js語法拓展，jsx具有js較為靈活的特點
xml在樹狀結構的表現上較為優秀
因為在嵌套層數較深、互動邏輯更復雜的情況下，xml+js比起js直接創建dom或CreateElement等方式來說更人性化、更易于維護
放止XSS DOM注入型攻擊
jsx會將標簽轉義為字串，以防止惡意標簽被注入到頁面
// 頁面上展示文案: <a href="https://www.cnblogs.com/ltfxy/archive/2022/04/11/#">inner text<\/a>
const FC = ({value}) => <div>{value}</div>
ReactDOM.render(<FC value=https://www.cnblogs.com/ltfxy/archive/2022/04/11/{`4.2 缺點
導致專案依賴增多
jsx必須依賴babel等編譯工具轉換成React.createElement才可以正常運行，導致專案依賴增多
5 深入react原始碼解讀jsx到ReactElement
此后，jsx被編譯成了React.CreateElement，后面要做的事情就是執行這個方法并創建React元素，對后續細節感興趣可以看看這篇深入react原始碼解讀jsx到ReactElement
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458037.html
標籤：其他
上一篇：富文本實作@選擇人
下一篇：css中的邊框圖片