JSX概述

　　由于通過(guò)React.createElement()方法創(chuàng)建的React元素代碼比較繁瑣，結(jié)構(gòu)不直觀，無(wú)法一眼看出描述的結(jié)構(gòu)，不優(yōu)雅，開(kāi)發(fā)時(shí)寫(xiě)代碼很不友好。

　　React使用JSX來(lái)替代常規(guī)的JavaScript，JSX可以理解為的JavaScript語(yǔ)法擴(kuò)展，它里面的標(biāo)簽申明要符合XML規(guī)范要求。

• React不一定非要使用JSX，但它有以下優(yōu)點(diǎn)：
  • JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化
  • 它是類(lèi)型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤
  • 聲明式語(yǔ)法更加直觀，與HTML結(jié)構(gòu)相同，降低了學(xué)習(xí)成本，提升開(kāi)發(fā)效率速度
• JSX語(yǔ)法：
  • 定義虛擬DOM時(shí)，不要用引號(hào)
  • 標(biāo)簽中混入js表達(dá)式時(shí)要用{}
  • 樣式的類(lèi)名指定不要用class，要用className
  • 內(nèi)聯(lián)樣式，要用style={{key: value}}的形式去寫(xiě)
  • 只有一個(gè)根標(biāo)簽
  • 標(biāo)簽必須閉合
  • 標(biāo)簽首字母：
    • 小寫(xiě)字母開(kāi)頭，則會(huì)將標(biāo)簽轉(zhuǎn)為html中同名標(biāo)簽，若html標(biāo)簽中無(wú)對(duì)應(yīng)的同名元素，編譯會(huì)報(bào)錯(cuò)
    • 大寫(xiě)字母開(kāi)頭，react就去渲染對(duì)應(yīng)的組件，若組件沒(méi)有定義，則報(bào)錯(cuò)

開(kāi)始本文正文，下面看下React中的JSX { }的使用，具體內(nèi)容如下所示：

在做react開(kāi)發(fā)的時(shí)候，我們知道最后要通過(guò)render方法來(lái)將React元素掛載到真實(shí)的DOM上。而創(chuàng)建一個(gè)React元素，可以通過(guò)兩種方式創(chuàng)建。
（1）通過(guò)JSX方式
（2）通過(guò)React.createElement()方法創(chuàng)建

而JSX的方式，最終也會(huì)被babel轉(zhuǎn)換，變成通過(guò)React.createElement()方法進(jìn)行創(chuàng)建。
之所以這樣子，是因?yàn)镴SX能夠很大程度的方便開(kāi)發(fā)，可以少寫(xiě)很多代碼。

而本篇文章就是講解一下如何在React中使用JSX。

1.在JSX中使用{ }

例如當(dāng)我們通過(guò)JSX創(chuàng)建一個(gè)React元素：

let a = 1
const div = <div></div>

而在這個(gè)div中想使用變量a，我們就可以通過(guò){}來(lái)對(duì)變量進(jìn)行引入。

（1）引入變量

const div = <div>{a}</div> //變量

當(dāng)然，除了引入變量這種，還有很多中方式可以在{}中進(jìn)行編寫(xiě)。

（2）引入對(duì)象屬性

    let empty = {
      a: 1,
      b: 2
    }
    const div = <div>{empty.a}</div> //對(duì)象屬性

（3）引入計(jì)算表達(dá)式

    const div = <div>{empty.a + empty.b}</div> //計(jì)算表達(dá)式

（4）引入函數(shù)

    const fn = ()=>{
      return 2
    }
    const div = <div>{fn()}</div> //函數(shù)

（5）引入邏輯表達(dá)式

    const div = <div>{fn() === 2 ? 1 : 2}</div> //邏輯表達(dá)式

（6）引入數(shù)組

    const div = <div>{[1,2,3,4,5]}</div> //數(shù)組

OK，除了上面寫(xiě)在大括號(hào)里的，還有幾種數(shù)據(jù)類(lèi)型沒(méi)有引入。這里需要注意，大括號(hào)里雖然可以解析數(shù)組，但是不能解析對(duì)象（有一種特例后面會(huì)說(shuō)）。

如果在大括號(hào)里面放入了對(duì)象，那么React就會(huì)報(bào)錯(cuò)。
同樣的，如果在大括號(hào)里的是一個(gè)方法，也會(huì)報(bào)錯(cuò)（也有一種特例）。

如果在{}里面，引入了布爾類(lèi)型，undefined，null這三種數(shù)據(jù)類(lèi)型。React雖然不會(huì)報(bào)錯(cuò)，但是并不會(huì)渲染到真實(shí)DOM上。

2.在JSX中嵌套標(biāo)簽

在正常的HTML里面，標(biāo)簽是可以任意嵌套的。如果在React中，可以看下面的代碼：

    class Em extends React.Component {
      render(){
        return <div></div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

通過(guò)上面的方式，是沒(méi)辦法實(shí)現(xiàn)出想要的效果的。因?yàn)樗环螶SX的使用規(guī)范，對(duì)于Em組件，是沒(méi)有收到p標(biāo)簽的，所以也不會(huì)對(duì)它進(jìn)行展示。
正確寫(xiě)法如下：

    class Em extends React.Component {
      render(){
        return <div>{this.props.children}</div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

這種方式，主要是通過(guò)props.children拿到了P標(biāo)簽，并且在Em組件里面渲染。

說(shuō)到這里，可以說(shuō)一下另一個(gè)用到{}的地方，當(dāng)我們給React組件綁定屬性的時(shí)候，可以通過(guò)…的方式：

    let props = { a:1,b:2}
    const div = <div {...props}>123</div>

請(qǐng)記住，這里的{…props}和Es6的解構(gòu)并不是一回事！

也就是這種寫(xiě)法只能出現(xiàn)在JSX里面，不能在HTML里面這么寫(xiě)。因?yàn)樵谶@里babel已經(jīng)對(duì)它進(jìn)行了處理所以才可以這么寫(xiě)。

3.{}中的樣式和事件處理

剛才說(shuō){}里面不應(yīng)該有對(duì)象和函數(shù)，但是有個(gè)別的特例，就是style樣式，和事件處理。

在JSX中給標(biāo)簽添加樣式是這么寫(xiě)的：

    const div = <div style={{fontSize:'14px',aaa:'2'}}></div>

也就是{}里面的，是該標(biāo)簽的樣式對(duì)象。值得注意的是里面的key都是用小駝峰命名的。而且必須有效，不然是無(wú)法渲染到真實(shí)DOM的標(biāo)簽上的。

在JSX中給標(biāo)簽添加事件是這么寫(xiě)的：

    const div = <div onClick={() => {console.log(123)}}>123</div>

同樣，事件名也是小駝峰式命名的。

4.在JSX中使用語(yǔ)句

在jsx中是可以通過(guò)語(yǔ)句來(lái)對(duì)React元素進(jìn)行處理的。例如

條件判斷語(yǔ)句：

    let div = [<div>123</div>];
    if(1+1 === 2){
      div.push(<div>true</div>)
    }else{
      div.push(<div>false</div>)
    }

循環(huán)語(yǔ)句：

    let div = [1,2,3,4,5].map((item,index) => {
      return <li key={index}>{item}</li>
    })

關(guān)于JSX的一些使用就先說(shuō)這么多，后續(xù)有新內(nèi)容會(huì)繼續(xù)補(bǔ)充。

到此這篇關(guān)于React中的JSX  { }的使用的文章就介紹到這了,更多相關(guān)React JSX使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論