藉助babel理解jsx

呆呆_呆呆發表於2019-01-21
BabelJS
1,開啟babel 輸入
你會看到右邊的轉化後的jsx是：React.createElement("div", null);是有兩個引數的，第一個是字串型別的div,第二個是這個時候是null,
2,如果輸入的是
hello worlde!
,則右邊的列印是：
React.createElement(
  "div",
  null,
  "hello worlde!"
);
複製程式碼
第一個引數依舊是字串div,第二個是null,第三個是div的內容，也可以理解為div的孩子
3，如果你輸入的是
<div>
<div>hello worlde!</div>
<div>hello worlde!</div>
<span>hello worlde!</span>
</div>
複製程式碼
右邊的列印是
React.createElement(
  "div",
  null,
      React.createElement(
        "div",
        null,
        "hello worlde!"
      ),
      React.createElement(
        "div",
        null,
        "hello worlde!"
      ),
      React.createElement(
        "span",
        null,
        "hello worlde!"
      )
);
複製程式碼
可以看出當標籤包含多個子節點的時候, React.createElement的第三個引數可以迴圈顯示，
4，如果標籤有屬性的時候

藉助babel理解jsx

可以看出，其實jsx的引數就是三個了，第一個是標籤，第二個是標籤的屬性，是個物件，第三個是標籤的孩子，
5，如果寫成元件效果如下：

藉助babel理解jsx

當有元件的時候 jsx的第一個引數變成了變數，如圖，引數為變數TestComponet，而不是字串，
6，如果元件首字母為小寫的時候 效果如下

藉助babel理解jsx

當元件首字母為小寫的時候，jsx傳遞的第一個引數是字串了，不是變數，所以這就是為什麼當我們元件命名首字母不大寫的時候 ，編輯的時候會報錯，這可能就是jsx的一種約定吧

總結：

jsx的寫法是React.createElement（one,two,three）,裡面需要傳遞引數（引數一般是三個）；
第一個引數是標籤型別，如果不是自定義元件，第一個引數是字串，字串記憶體就是標籤，比如div,span,text等html標籤；
第二個引數是屬性，就是這個標籤體或者元件的屬性，這是個物件，如果沒有屬性的時候就是null,
第三個是孩子，當是文字內容的時候就直接是個字串或者是傳遞的變數，如果有多個孩子節點的時候，那麼就是一個新的jsx的巢狀，格式一樣，所以可以判斷引數的個數知道這個節點有多少個子節點，如果沒有子節點第三個引數就是null,

相關文章