JSX(JavaScript XML)是 js
內定義的一套類 XML 語法,能夠解析出目標 js 代碼,顛覆傳統 js
寫法。HTML
由瀏覽器解析,而 JSX
是由 js
解析。當讓也能夠經過構建工具先解析生成,如 grunt
、 webpack
,這樣能夠減小代碼這行中 js 解析 JSX 的時間,這個後面會專題講訴。JSX 本來是使用官方本身提供的方法處理,2015-7-12 日官方博客文章聲明其自身用於 JSX 語法解析的編譯器 JSTransform 已通過期,再也不維護,React JS
和 React Native
已經所有采用第三方Babel
的JSX編譯器實現。javascript
JSX必須嚴格閉合。css
//錯誤 <div> //正確 <div/>(也行,看需求) <div></div>
能夠把JSX標籤當作一個變量,能夠在任何位置使用和使用變量裝起來。html
var div = <div>ddd</div> ReactDOM.render(div);
JSX一個標籤就是一個組件,當存在兩個組件在同一級是,必須使用一個標籤(組件)包起來。
下面是錯誤的寫法java
<div></div> <div></div>
正確寫法是react
<span> <div></div> <div></div> </span>
自定義組件使用是必須首字母大寫,數字母不大寫直接解析爲同名html標籤。webpack
<Test />//自定義 <div></div>//直接解析爲<div></div> <test />//直接解析爲<test></test>,在瀏覽器是不識別的,沒法顯示
上面代碼體現了 JSX 的基本語法規則:遇到 HTML 標籤(以 < 開頭),就用 HTML 規則解析;遇到代碼塊(以 { 開頭),就用 JavaScript 規則解析。不是什麼JavaScript語法均可以用的,像if語句就不能夠用,下面列舉一些用法。其實會用最基本的用法就夠了,其餘的瞭解下。git
var name = "test"; <div>{name + "666"}</div>
這個方式,很方便github
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
由於上面能夠直接使用數組,就方便了下面map方法的使用。其實就是至關於函數返回了一個結果,這個結果沒有綁在變量上,直接使用了。web
var names = ['Alice', 'Emily', 'Kate']; <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>
直接使用if語句目前是不支持的。數組
<div className={if(isComplete){ 'is-complete' }}></div>
而解決辦法是使用如下方法:
<div className={this.state.isComplete ? 'is-complete' : ''}></div>
<div className={this.state.isComplete && 'is-complete'}></div>
...
操做符...操做符是ES6新語法,JSX使用了它的特色,但並非真正的ES6語法。
var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />;
至關於
var component = <Component foo={props.foo} bar={props.bar} />;
若是override,該怎麼作呢?也很簡單:
var component = <Component {...props} foo="override"/>; console.log(this.props.foo) //輸出 override
JSX的註釋,實話說不方便。下面的註釋是錯誤的,只要把JSX關鍵部分註釋是沒效果的。
//<div></div> <div> //</div>
下面有兩種方式能夠生效
<div> { /* dddd */ } </div>
//多行註釋 <input /* dddd */ name="email"/> // 單行註釋 <input name="email" //ddd placeholder="ddd"/>
因此像註釋某個或多個JSX整個標籤,要在花括號中註釋
{ //必須有空字符串,要不會包語法錯誤。 ""//<div>ddd</div> }
更加熟悉
,語法跟HTML很是類似(90以上類似度)更加語義化
,容許自定義標籤及組件。更加直觀
,標籤處理方式,更加可讀。抽象化
,React的升級,不須要改動任何JSX代碼。關注點分離,模塊化
,JSX以乾淨且簡潔的方式保證了組件中的標籤與全部業務邏輯的互相分離。JSX跟HTML很像,但卻不是HTML語法的完美複製。實際上,JSX規範中這樣聲明:
這個規範(JSX)並不嘗試去遵循任何XML或HTML規範。JSX是做爲一種ECMAScript特性來設計的,至於你們以爲JSX像XML這一事實,那僅僅是由於你們比較熟悉XML。 詳細
下面咱們探索下JSX與HTML語法上的幾點關鍵區別。
var id = this.props.id; function getId(){ return "test"; } <div id={id} ></div>//變量 <div id={this.getId()} ></div>//函數也能夠
//在js中寫css屬性固然要遵照語法,就像寫js對象同樣。 <div className="test"></div>
var add = funtion(){} <div className="test" onClick={add} style={style}></div>
//在js中寫css屬性固然要遵照語法,就像寫js對象同樣。 var style= { fontSize: 13, bold: normal, } <div style={style}></div>
下面的特殊屬性是JSX中存在