01.JSX，了解一下？ · React學習指北

- JSX是神馬 - 書寫規范 - JSX中的{} - 屬性 - children - 防止xss - JSX 與單入口 - JSX 與模板引擎的區別 - JSX是對真實DOM的描述 [TOC] ## 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> ); ``` ### 防止xss `{}`中返回的若是一個`JSX`，且是一個腳本，`{}`會自動將其轉換成普通的字符串防止腳本注入。 ### 其它注意事項我們說了`{}`只能放表達式，什么樣的不是表達式呢，像這樣的 ``` <div>{let i = 123;i}</div> //<---錯誤的示范！！！會報錯 ``` 另外`{}`中禁止放置JS對象，會報錯但`{}`中放置`null`是不會報錯的，放置null表示什么都不渲染 ## 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元素。 --- ToBeContinue...