JSX，瞭解一下？

Cris_冷崢子發表於2018-03-20
JS
  • 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...

相關文章