React學(xué)習(xí)筆記-2-什么是jsx?如何使用jsx？

什么是jsx？
    JSX是JavaScript  XML 這兩個(gè)單詞的縮寫，xml和html非常類似，簡(jiǎn)單來(lái)說(shuō)可以把它理解成使用各種各樣的標(biāo)簽，大家可以自行 百度。所以jsx就是在javascript中來(lái)編寫長(zhǎng)得很像xml的語(yǔ)言，這里只是像，在本質(zhì)上是不一樣的。
    jsx是一種基于Ecmascript的一種新特性，
        是一種定義帶屬性樹(shù)結(jié)構(gòu)的語(yǔ)法，樹(shù)結(jié)構(gòu)就是我們的dom結(jié)構(gòu)，屬性就是dom節(jié)點(diǎn)中的屬性，比如所class，id等
    jsx不是xml或者Html，
        不是一種限制。在react中，我們可以使用jsx來(lái)編寫代碼，也可以使用純javascript來(lái)編寫代碼，所以說(shuō)即使你不學(xué)jsx也可以正常使用react，但是Facebook官方腿甲使用jsx來(lái)編寫。

為什么我們要使用jsx呢？
因?yàn)閖sx有五個(gè)特點(diǎn)
  第一個(gè)：類xml語(yǔ)法容易接受，在實(shí)際的工程中，還有別的人員接觸前端代碼，比如設(shè)計(jì)師，測(cè)試等等，他們很多人可能不熟悉javascript，但是很多人熟悉xml

  第二個(gè)：增強(qiáng)js的語(yǔ)義，js主要體現(xiàn)在界面的邏輯方面，但是對(duì)于界面元素的表現(xiàn)，js是比較弱的，在不使用jsx之前，大部分時(shí)候我們使用的是模板，模板其實(shí)就是一段字   符串，你在模板里面寫東西是可以的，模板的問(wèn)題在于他頁(yè)面的內(nèi)容本身是分離的，并且模板本身是字符串，我們很難對(duì)其進(jìn)行擴(kuò)展，但是jsx是直接在js的基礎(chǔ)上去編寫
  html，他的本質(zhì)并不是字符串，就是js語(yǔ)言本身，所以說(shuō)他可以在語(yǔ)義層面上增強(qiáng)js

  第三個(gè)：結(jié)構(gòu)清晰，使用jsx來(lái)編寫代碼，我們通過(guò)代碼就可以知道生成的結(jié)果是什么，就像看html代碼一樣。

  第四個(gè)：抽象程度高，帶來(lái)的第一個(gè)好處就是，react屏蔽掉了所有的手動(dòng)dom操作，之所以能夠屏蔽dom操作，就是因?yàn)樗裆咸峁┝艘粋€(gè)新的抽象層，作為開(kāi)發(fā)者我們
  只需要關(guān)注這一個(gè)抽象層，而不必關(guān)心抽象層下面到底是如何去實(shí)現(xiàn)的，從而屏蔽掉了手動(dòng)的dom操作，抽象帶來(lái)的第二個(gè)好處就是跨平臺(tái)，從而誕生了react native。     為什么可以跨平臺(tái)呢？你使用jsx去編寫的時(shí)候，其實(shí)是獨(dú)立于平臺(tái)的語(yǔ)法，你設(shè)計(jì)是平臺(tái)本身，react完全可以在不同的平臺(tái)上提供解釋器，從而可以讓你的代碼執(zhí)行在不   同的平臺(tái)上，所以我們說(shuō)抽象是jsx的核心。

  第五個(gè)：代碼模塊化，在傳統(tǒng)的MVC開(kāi)發(fā)中，MVC其實(shí)是分離的，無(wú)論是在概念上，還是在實(shí)際的代碼上，他們?nèi)咄疾粫?huì)放在一起，但是在react中，我們發(fā)現(xiàn)，編   寫一個(gè)組件的時(shí)候，他的相關(guān)代碼全部都放在了一起，jsx中，既可以js的邏輯，有可以寫頁(yè)面的結(jié)構(gòu)，乍一看，好像是不太合適，我們學(xué)到的經(jīng)驗(yàn)是吧不同的經(jīng)驗(yàn)區(qū)分出     來(lái)，有助于開(kāi)發(fā)的進(jìn)行。那react將他們都混在了一起，這樣是一個(gè)好的選擇嗎？其實(shí)react所做的部分是一個(gè)橫向的劃分，MVC所做的事情是縱向的劃分，也就是手MVC   把整個(gè)項(xiàng)目從上到下切了兩刀，把它切成了三個(gè)部分，但是react所做的事情是把一個(gè)項(xiàng)目從左到右，切成了很多部分，或者說(shuō)他既結(jié)合了從上到下，又結(jié)合了從左到右，   把一個(gè)大的項(xiàng)目打散成為了許多小的項(xiàng)目，從而實(shí)現(xiàn)代碼的模塊化，在代碼的力度變得非常小的時(shí)候，我們就可以專注于一個(gè)非常具體的功能，在這種情況下，把他們的代   碼都放在一起，更有助于理解，并且有助于代碼本身的組織是，是想一下，如果你把你一個(gè)項(xiàng)目拆成了幾十上百個(gè)曉得模塊，你還要在每一個(gè)模塊上運(yùn)用MVC的方法，分     成三個(gè)甚至是更多個(gè)文件，那么這個(gè)項(xiàng)目本身就要維護(hù)成百上千個(gè)文件了，這是一件非常可怕的事情，所以說(shuō)在我們討論代碼劃分的合理性時(shí)，一定要研究清楚前提條件，   也就是代碼的規(guī)模的大小.

jsx的語(yǔ)法

        		
網(wǎng)友評(píng)論