JSX簡介

JSX簡介

JSX(JavaScript XML)js 內定義的一套類 XML 語法,能夠解析出目標 js 代碼,顛覆傳統 js 寫法。HTML 由瀏覽器解析,而 JSX 是由 js 解析。當讓也能夠經過構建工具先解析生成,如 grunt
webpack ,這樣能夠減小代碼這行中 js 解析 JSX 的時間,這個後面會專題講訴。JSX 本來是使用官方本身提供的方法處理,2015-7-12 日官方博客文章聲明其自身用於 JSX 語法解析的編譯器 JSTransform 已通過期,再也不維護,React JSReact 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使用JavaScipt

上面代碼體現了 JSX 的基本語法規則:遇到 HTML 標籤(以 < 開頭),就用 HTML 規則解析;遇到代碼塊(以 { 開頭),就用 JavaScript 規則解析。不是什麼JavaScript語法均可以用的,像if語句就不能夠用,下面列舉一些用法。其實會用最基本的用法就夠了,其餘的瞭解下。git

在JSX中使用變量

var name = "test";
<div>{name + "666"}</div>

在JSX中使用Array(特殊的變量)

這個方式,很方便github

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

在JSX中使用函數

由於上面能夠直接使用數組,就方便了下面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>

在JSX中使用...操做符

...操做符是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的註釋,實話說不方便。下面的註釋是錯誤的,只要把JSX關鍵部分註釋是沒效果的。

//<div></div>
<div> //</div>

下面有兩種方式能夠生效

  • 或括號註釋,跟javascript差很少
<div>
    {
        /*
            dddd
        */
    }
</div>
  • 內聯屬性註釋
//多行註釋
<input
    /*
        dddd
    */
    name="email"/>
// 單行註釋
<input 
    name="email"  //ddd
    placeholder="ddd"/>

因此像註釋某個或多個JSX整個標籤,要在花括號中註釋

{
    //必須有空字符串,要不會包語法錯誤。
    ""//<div>ddd</div>
}

JSX優勢和特色

  • 更加熟悉,語法跟HTML很是類似(90以上類似度)
  • 更加語義化,容許自定義標籤及組件。
  • 更加直觀,標籤處理方式,更加可讀。
  • 抽象化,React的升級,不須要改動任何JSX代碼。
  • 關注點分離,模塊化,JSX以乾淨且簡潔的方式保證了組件中的標籤與全部業務邏輯的互相分離。

JSX與HTML有何不一樣

JSX跟HTML很像,但卻不是HTML語法的完美複製。實際上,JSX規範中這樣聲明:

這個規範(JSX)並不嘗試去遵循任何XML或HTML規範。JSX是做爲一種ECMAScript特性來設計的,至於你們以爲JSX像XML這一事實,那僅僅是由於你們比較熟悉XML。 詳細

下面咱們探索下JSX與HTML語法上的幾點關鍵區別。

  • JSX可使用變量屬性
    首先看看HTML的例子
    JSX以一樣的方式實現了屬性的設置,同時還提供了將屬性設置爲動態JavaScript變量的便利。要設置動態屬性,你只須要包本來的引號括起來的文本替換爲花括號包囊的JavaScript變量或函數。看例子:
var id = this.props.id;
function getId(){
    return "test";
}
<div id={id} ></div>//變量
<div id={this.getId()} ></div>//函數也能夠
  • 其中使用到HTML的class在JSX中是className
//在js中寫css屬性固然要遵照語法,就像寫js對象同樣。
<div className="test"></div>
  • 事件要使用駝峯式寫法。
var add =  funtion(){}
<div className="test" onClick={add} style={style}></div>
  • sytle的css屬性要使用駝峯式寫法。
//在js中寫css屬性固然要遵照語法,就像寫js對象同樣。
var style= {
    fontSize: 13,
    bold: normal,
}
<div style={style}></div>

非DOM屬性

下面的特殊屬性是JSX中存在

  • key
  • ref
  • dangerouslySetInnerHTML
相關文章
相關標籤/搜索