JSX，瞭解一下？

• JSX是神馬
  • 書寫規範
• JSX中的{}
  • 屬性
  • children
  • 防止xss
  • 其它注意事項
• JSX 與 單入口
• JSX 與 模板引擎的區別
• JSX是對真實DOM的描述

JSX是神馬

JSX是React中特有的東東，全稱 Javascriptのxml。

它的長相是這樣的

let jsx = <h1>hello</h1>;
複製代碼

看起來就是一個普通的html標籤不是？嗯。。。慢着。。。看看作左邊，咱們將這個html標籤賦給了一個js變量!

what!? 這是什麼操做？

嘿，這就是JSX的功能了。咱們說JSX的全稱應該翻譯爲Javscriptのxml（Javscript中的xml），而沒有翻譯成Javascript和xml，這是由於比起xml/html標籤，這更像是在javascript中擴展了一個功能，它把xml當作變量的值賦給js變量，這是對javascript語法的延伸。

另外若是隻考慮JSX的長相，咱們也經常把它稱之爲 jsx tag。

書寫規範

JSX 支持換行

let jsx = (
    <div>
    	<h1>hello</h1>
    </div>
)
複製代碼

須要注意的是老版本的React若是你換行但沒帶上()做爲註釋的話，那麼React會自動在=後填上;，就會報錯！

JSX中的{}

{}能幫助咱們更好的描述一個JSX tag的 屬性 和 children。

屬性

一個JSX tag 也能像xml/html 標籤元素同樣擁有不少的屬性，像這樣

let jsx = <img src='./xxx...'/>
複製代碼

這個屬性的值能夠是一個固定的字符串，也能夠是一個動態的js變量，但這個js變量必須利用{}包裹起來。（Vue中這貨稱之爲mustache）

let src = './1.jpg';
let jsx = <img src={src} />
複製代碼

children

另外{}其實能包含任何JS表達式（只要有返回值，返回原生js對象除外），甚至是延伸出的JSX tag。 而且{}不只能做爲屬性的值，還能做爲一個JSX tag的子元素（文本或Element）。

let className = 'class1';
let src = './1.jpg';
let element2 = <img src={src} alt='1.jpg'/>;
let element = (
  <div className={className}>
    {element2} //<----看這裏！！！
  </div>
);
複製代碼

其它注意事項

咱們說了{}只能放表達式，什麼樣的不是表達式呢，像這樣的

<div>{let i = 123;i}</div> //<---錯誤的示範！！！會報錯
複製代碼

另外{}中禁止放置JS對象，會報錯

但{}中放置null是不會報錯的，放置null表示什麼都不渲染

防止xss

{}中返回的如果一個JSX，且是一個腳本，{}會自動將其轉換成普通的字符串防止腳本注入。

JSX 與 單入口

一個js變量它並不會管它所接受的JSX tag內部是否包含了其它JSX tag，但它有一個原則，那就是它只能接受一個JSX tag做爲入口。

這意味着若是你給js變量賦值時你得JSX長這樣，就會報錯

let jsx = (
    <div></div>
    <img />
)
複製代碼

JSX 與 模板引擎的區別

綜上所述JSX中的{}讓其擁有了相似模板引擎的功能，但它比模板引擎更強大，由於它是javascript語法的延伸：

• 你能夠把它做爲一個變量的值，在if和for循環中使用它
• 也能把它當作參數傳遞給函數
• 還能做爲函數的返回值返回。

JSX是對真實DOM的描述

上面咱們說了這麼多，但實際上JSX表明了什麼呢？它表明的就是一個DOM元素嗎？

這樣的認知是不大穩妥的，實際上它是對 DOM元素 的一種描述，並非DOM元素自己。

前面所說的JSX tag們都會在編譯後變成這樣

//編譯前
let jsx = <h1 className="class1">hello</h1>
//編譯後
React.createElement(
    'h1' //類型
    ,{className:'class1'} //標籤屬性鍵值對
    ,'hello' //children節點
)
複製代碼

而這個React.createElement函數最會生成一個對象，咱們稱之爲React對象或則還有一個更高逼格的名稱虛擬DOM。

{
  type: 'h1',
  props: {
    className: 'class1',
    children: 'hello'
  }
}
複製代碼

這個react元素是對即將要生成的真實DOM的一種描述，React會根據這個對象的描述渲染出真正的dom元素。

注意: 當只有一個子元素時，children的值是一個字符串或則對象，但存在多個子元素時，則會成變成一個數組，每一個數組中存放着對應的子元素。

---

ToBeContinue...