React學習筆記-2-什麼是jsx?如何使用jsx？

時間  2019-11-18
標籤 react 學習 筆記 什麼 jsx 如何 使用 欄目 React 简体版
原文   原文鏈接
  1. 什麼是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來編寫。


  2. 爲何咱們要使用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的方法，分     成三個甚至是更多個文件，那麼這個項目自己就要維護成百上千個文件了，這是一件很是可怕的事情，因此說在咱們討論代碼劃分的合理性時，必定要研究清楚前提條件，   也就是代碼的規模的大小.


  3. 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標籤。

    第一個知識點：HelloMessage,元素名,咱們編寫的每個組件其實也就是一個元素名，這裏咱們聲明瞭一個HelloMessage標籤，在最後一行中，咱們將它渲染到了mountNode中，咱們能夠看到，渲染的時候使用的語法就是標準的html語法，直接在標籤中填寫標籤名，只是這個標籤名是咱們自定義出來的。javascript

    第二個知識點：就是子節點 this.props.name,標籤和標籤之間能夠有嵌套關係，就像咱們在html中編寫的同樣，每一個標籤均可以嵌套在別的標籤中，他也能夠擁有不少的標籤做爲他的子節點，在jsx中，jsx和html嵌套不一樣的一點就是能夠在子節點中使用求值表達式，咱們能夠看到圖中的子節點本質上是一個文本節點，只是這個文本節點有兩部分組成，第一個部分是Hello字符串，後面跟一個空格，第二部分是由大括號括起來的一個表達式，這個表達式所作的事情就是取出這個組件屬性中的，name屬性的值，並把它放在這個節點裏，和hello+空格拼成一個完整的文本節點，至於什麼是屬性，咱們後面說。這裏只要知道每一個組件都有屬性，也就是props，屬性內部會存不少屬性和屬性名。

    第三個知識點就是節點屬性，<HelloMessage name="李明"></HelloMessage>,這裏的name就是，咱們使用this.props.name來獲取他的值，這個值從哪來呢，就是在使用標籤的時候，咱們給定的。


  4. 補充幾個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。直接使用會報錯。


  5. 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>



  6. 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上面，css

            React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

     



  7. jsx語法實例：嵌套
    6中的實例就有演示，以下代碼
            React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

    咱們將咱們的自定義組件HelloWorld放到了div中，實際開發中，咱們能夠嵌套無數個。html

  8. 條件判讀的四種寫法
    if語句不是一個表達式，他是一個語句，因此說在編寫jsx代碼的時候，咱們不能直接使用if語句，可是咱們可使用四種表達式來實現相同的效果

    咱們實現這個功能，若是傳入屬性name的值，咱們就輸出name的值，若是沒有，咱們就輸出world

    8.1使用三元表達式
    若是咱們直接使用 if....else語句會直接報錯，代碼以下。
    <!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,{
              if(this.props.name)
                  this.props.name
              esle
                  "world"
           }</p>
        }
        });
        React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

    </script>
</body>
</html>
    點擊查看代碼

     


    因此這裏咱們使用三元表達式，以下代碼，能夠吧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使用比較計算符

    java

    <!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>

     

  9. 萬能的函數表達式
    一般狀況下，函數聲明並非一個表達式，而是一個語句，可是咱們能夠經過特殊的方式，將它改爲表達式，從而能夠直接調用函數獲取返回值，因爲他是一個表達式，咱們能夠把它用在大括號中，咱們看下面的例子。
    <!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，就能夠實現咱們想要的效果react

     (function(obj){
               })(this)

    這個括號還有一種寫法，就是把(this)前面的括號放到後面，具體看代碼，也是能夠的。dom

    <!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的用法。ide

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程