- 什么是jsx？
JSX是JavaScript XML 這兩個單詞的縮寫，xml和html非常類似，簡單來說可以把它理解成使用各種各樣的標簽，大家可以自行 百度。所以jsx就是在javascript中來編寫長得很像xml的語言，這里只是像，在本質上是不一樣的。
jsx是一種基於Ecmascript的一種新特性，
是一種定義帶屬性樹結構的語法，樹結構就是我們的dom結構，屬性就是dom節點中的屬性，比如所class，id等
jsx不是xml或者Html，
不是一種限制。在react中，我們可以使用jsx來編寫代碼，也可以使用純javascript來編寫代碼，所以說即使你不學jsx也可以正常使用react，但是Facebook官方腿甲使用jsx來編寫。 - 為什么我們要使用jsx呢？
因為jsx有五個特點
第一個：類xml語法容易接受，在實際的工程中，還有別的人員接觸前端代碼，比如設計師，測試等等，他們很多人可能不熟悉javascript，但是很多人熟悉xml
第二個：增強js的語義，js主要體現在界面的邏輯方面，但是對於界面元素的表現，js是比較弱的，在不使用jsx之前，大部分時候我們使用的是模板，模板其實就是一段字 符串，你在模板里面寫東西是可以的，模板的問題在於他頁面的內容本身是分離的，並且模板本身是字符串，我們很難對其進行擴展，但是jsx是直接在js的基礎上去編寫
html，他的本質並不是字符串，就是js語言本身，所以說他可以在語義層面上增強js
第三個：結構清晰，使用jsx來編寫代碼，我們通過代碼就可以知道生成的結果是什么，就像看html代碼一樣。
第四個：抽象程度高，帶來的第一個好處就是，react屏蔽掉了所有的手動dom操作，之所以能夠屏蔽dom操作，就是因為他像上提供了一個新的抽象層，作為開發者我們
只需要關注這一個抽象層，而不必關心抽象層下面到底是如何去實現的，從而屏蔽掉了手動的dom操作，抽象帶來的第二個好處就是跨平台，從而誕生了react native。 為什么可以跨平台呢？你使用jsx去編寫的時候，其實是獨立於平台的語法，你設計是平台本身，react完全可以在不同的平台上提供解釋器，從而可以讓你的代碼執行在不 同的平台上，所以我們說抽象是jsx的核心。
第五個：代碼模塊化，在傳統的MVC開發中，MVC其實是分離的，無論是在概念上，還是在實際的代碼上，他們三者往往都不會放在一起，但是在react中，我們發現，編 寫一個組件的時候，他的相關代碼全部都放在了一起，jsx中，既可以js的邏輯，有可以寫頁面的結構，乍一看，好像是不太合適，我們學到的經驗是吧不同的經驗區分出 來，有助於開發的進行。那react將他們都混在了一起，這樣是一個好的選擇嗎？其實react所做的部分是一個橫向的划分，MVC所做的事情是縱向的划分，也就是手MVC 把整個項目從上到下切了兩刀，把它切成了三個部分，但是react所做的事情是把一個項目從左到右，切成了很多部分，或者說他既結合了從上到下，又結合了從左到右， 把一個大的項目打散成為了許多小的項目，從而實現代碼的模塊化，在代碼的力度變得非常小的時候，我們就可以專注於一個非常具體的功能，在這種情況下，把他們的代 碼都放在一起，更有助於理解，並且有助於代碼本身的組織是，是想一下，如果你把你一個項目拆成了幾十上百個曉得模塊，你還要在每一個模塊上運用MVC的方法，分 成三個甚至是更多個文件，那么這個項目本身就要維護成百上千個文件了，這是一件非常可怕的事情，所以說在我們討論代碼划分的合理性時，一定要研究清楚前提條件， 也就是代碼的規模的大小. - jsx的語法
<script type="text/jsx"> var HelloMessage=React.createClass({ render:function(){ return <div className="test">Hello{this.props.name}</div>; } }); React.render(<HelloMessage name="李明"></HelloMessage>>,mountNode); </script>
看這個例子，很簡單，只是實現了render函數，從上面的代碼中，我們可以看出，jsx其實本質上就是js，他和js的區別就是可以直接在里面編寫html標簽，這在普通的js中是無法實現的，要想實現只能采用字符串的形式來拼接標簽，但是在jsx中，可以原生的支持html標簽。
第二個知識點：就是子節點 this.props.name,標簽和標簽之間可以有嵌套關系，就像我們在html中編寫的一樣，每個標簽都可以嵌套在別的標簽中，他也可以擁有很多的標簽作為他的子節點，在jsx中，jsx和html嵌套不同的一點就是可以在子節點中使用求值表達式，我們可以看到圖中的子節點本質上是一個文本節點，只是這個文本節點有兩部分組成，第一個部分是Hello字符串，后面跟一個空格，第二部分是由大括號括起來的一個表達式，這個表達式所做的事情就是取出這個組件屬性中的，name屬性的值，並把它放在這個節點里，和hello+空格拼成一個完整的文本節點，至於什么是屬性，我們后面說。這里只要知道每個組件都有屬性，也就是props，屬性內部會存很多屬性和屬性名。
第一個知識點：HelloMessage,元素名,我們編寫的每一個組件其實也就是一個元素名，這里我們聲明了一個HelloMessage標簽，在最后一行中，我們將它渲染到了mountNode中，我們可以看到，渲染的時候使用的語法就是標准的html語法，直接在標簽中填寫標簽名，只是這個標簽名是我們自定義出來的。
第三個知識點就是節點屬性，<HelloMessage name="李明"></HelloMessage>,這里的name就是，我們使用this.props.name來獲取他的值，這個值從哪來呢，就是在使用標簽的時候，我們給定的。 - 補充幾個react語法的關鍵內容。
第一：首字母大小寫。react對於首字母的大小寫是敏感的，如果一個組件的首字母是大寫，那么react就知道他是一個自定義的組件，如果是小寫，react就會把它當做自帶dom的自帶元素名，比如說我們上面代碼中的HelloMessage首字母就是大寫，是自定義的組件，后面的div首字母是小寫，因為他是dom中的組件，如果你的自定義組件首字母是小寫，那么字啊render渲染的時候會出錯，因為react會去dom中尋找，但是顯然你自定義的組件是不會存在於dom標准組件中，所以就會出錯。
第二：嵌套。組件和組件之間，就像dom和dom之間，可以進行嵌套，上面代碼中我們只進行了一層嵌套，就是在div中嵌套了一個文本節點，其實可以在里面嵌套各種各樣的無數節點
第三：求值表達式。求值表達式其實和jsx本身是沒有什么關系的，他是作為js本身的一個特性，js中有幾種語法元素，比如關鍵字，語句，表達式等等，那么求值表達式是什么意思？就是他本身是一個表達式，他會返回一個值，這里我們需要強調的是求值表達式和語句本質上是不一樣的，也就是說，我們在編寫jsx的時候，大括號里面，不可以使用語句，比如if語句，for語句，switch語句等，都是不可以的，但是求值表達式可以的，那我們應該如何去區分求值表達式和和語句呢？多個表達式可以聯合使用，但是語句是不可以的，比如圖中的this.props.name是一個字符串形式的表達式，他會返回一個字符串，我們可以對他進行一些運算，比如說給他加個abc，做字符串的加法，把他們連到一起，這是可以的，但是如果是是個if語句，你是不能在if語句進行運算的，語句是不能進行運算的，但是表達式可以，所以區分表達式和語句的方法就是看他能不能進行運算。雖然我們不能直接使用if等語句，但是我們可以把它包裹在函數求值表達式中，從而在函數求值表達式內部來使用這個語句，但是這個函數本身是一個表達式，所以我們可以把它用在jsx的大括號中，這樣我們就實現了可以在大括號中運行各種語句，但是在實際使用中，這並不是一個很好的情況，如果有這樣的情況，建議把它獨立出來，然后在大括號中來調用這個函數。
第四：駝峰命名。jsx標簽使用的是駝峰命名，函數名也是。
第五：兩個特殊的屬性。html的標簽中可以使用html屬性和class屬性，但是我們現在是在js的上下文中區編寫html文件，html和class是js得保留字和關鍵字，所以我們不能直接把他寫在js中，jsx解決這個問題的辦法就是使用兩個別名來代替他們，也就是htmlFor和className，如果我們要使用html和class屬性，我們實際要寫的是htmlFor和className，在解釋器解釋的時候，會自動把他們一一對應過去，可以看到我們上面的代碼中，div的class就是寫的className。直接使用會報錯。 - jsx語法實例---注釋
添加注釋有兩種方法，第一種是多行注釋，使用/**/,第二種是單行注釋，使用//,
注釋可以放在兩個部分。
第一個部分：子節點中，也就是標簽包裹的這一部分，這里需要使用大括號來包裹注釋。下面的代碼中，HelloWorld后面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world{ /* 這是一個多行注釋 */ //這是一個單行注釋 }</p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
第二個部分：屬性中，也就是標簽本身這里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p /* 這是一個注釋 */ name="李明"//這里是一個屬性，單行注釋也可以和屬性放在同一行 //這是一個單行注釋 >Hello,world { /* 這是一個多行注釋，放在了子節點中 */ "Jerry"//他是字符串，由於被包裹在大括號中，本身應該是js，所以應該用雙引號包裹 //我是單行注釋 } </p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
- jsx語法實例--如何在jsx里面書寫css樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world</p> } }); React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); </script> </body> </html>
需要注意的是其他屬性的賦值一般是字符串，但是style 屬性的賦值一般是一個對象，這是因為style屬性比較特殊，react會把style里面自定義的屬性，正確的應用到style上面，
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); - jsx語法實例：嵌套
6中的實例就有演示，如下代碼
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);我們將我們的自定義組件HelloWorld放到了div中，實際開發中，我們可以嵌套無數個。
- 條件判讀的四種寫法
if語句不是一個表達式，他是一個語句，所以說在編寫jsx代碼的時候，我們不能直接使用if語句，但是我們可以使用四種表達式來實現相同的效果
我們實現這個功能，如果傳入屬性name的值，我們就輸出name的值，如果沒有，我們就輸出world
8.1使用三元表達式
如果我們直接使用 if....else語句會直接報錯，代碼如下。
點擊查看代碼
所以這里我們使用三元表達式，如下代碼，可以吧HelloWorld里，name的屬性去掉以后，在看看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name ? this.props.name : "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.2使用一個變量，我們通過函數來個這個變量賦值，最后把變量的值直接用在大括號里。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//這里有逗號，切記 render: function(){ var name=this.getName(); return <p>Hello,{name}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.3改8.2中的例子，直接把大括號去掉，直接調用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//這里的逗號 render: function(){ return <p>Hello,{this.getName()}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.4使用比較計算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name || "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
- 萬能的函數表達式
通常情況下，函數聲明並不是一個表達式，而是一個語句，但是我們可以通過特殊的方式，將它改成表達式，從而可以直接調用函數獲取返回值，由於他是一個表達式，我們可以把它用在大括號中，我們看下面的例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" })(this) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
這個例子要注意理解強制求值運算，也就是把function包裹起來的那個括號，在這個括號里面的function會被強制求值運算，他會返回一個函數的引用，然后我們又在后面加了一個(this),用()來調用他， 並傳入一個this，就可以實現我們想要的效果
(function(obj){ })(this)這個括號還有一種寫法，就是把(this)前面的括號放到后面，具體看代碼，也是可以的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" }(this)) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
括號放在外面和里面的區別，放在里面的時候，括號執行完畢拿到的是函數的引用，然后在調用他，但是括號放在外面的時候，弄到的直接就是返回值，而不是函數引用本身。建議大家看看this的用法。
react比較入門的小demo
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。