你不知道的jsx（不止用法）

寫react怎麼能不懂jsx？ 啊？ 能夠啊 誰說沒jsx react跑不起來的。對，能夠，那你是要接盤俠看十幾天都沒看懂你的標籤結構嗎......

什麼是jsx

jsx 即 javascript XML。？？？ 什麼鬼 JavaScript 跟xml 的結合體嗎？這麼會玩？沒錯，jsx就是在javasccript中構建 XML 標籤的 語法，在react中使用jsx並非必須的，可是有更好的東西爲何不用。（就好像學校說此次的補習是自願的，你們能夠自行選擇......）

舉個栗子：
不用jsx建立標籤是這樣的

// 注意對象若是不換行寫 逗號後面要加個空格，不要不加噢
react.createElement('h1', {className: 'question', 'question'})

使用jsx 是這個樣子的

<h1 className="question">question</h1>

嗯哼？你自願補習不？

上面的語法是等效的，就是說你怎麼寫出來的結果都是同樣的，怎麼感受這像語法糖，可是卻沒人這麼說，是否是我對語法糖有什麼誤解？

jsx跟以往的在js中寫html相比，有這麼幾個特色：

• jsx是一種語法變換，每個節點對應一句函數的調用
• jsx不須要運行時庫，js環境就能搞，固然須要轉換
• jsx並無改變js的語義（由於他仍是js裏面並無html）他只是函數的簡單調用，並無對js作任何和修改。

等等 你說他好，爲何他好

爲何使用jsx

更加熟悉

是的，你不以爲很熟悉嗎？個人天啊，簡直就是html，不須要會代碼，知道html標籤的人都能看懂你的標籤結構，特別是，ui小姐姐，當他說你這裏差了 1px的時候... 當他說你這個結構不該該是這樣的時候...(一臉幸福，ui竟然是個小姐姐)

更加語義化

jsx容許你使用全部預約義的html5標籤和自定義標籤。爽吧，標籤名字自定義了，你語義化的能力多高，你的項目的語義化程度就有多高。騷年，靠你了。

更加直觀

相對於使用原生js來寫的結構，跟jsx可讀性是沒得比的

抽象化

使用jsx能更好的抽象問題，當你的需求發現小許改變時，如果抽象得當你會發現，你要改的代碼不多或者根本不用更改

定義一個自定義組件

var Header = React.createClass ({
    render: function () {
        return (
            <div className="header">
                <h1>title</h1>
            </div>
        )
    }
})

上面還只是一個一次性的組件，要讓這個組件使用起來，還須要一些動態元素

使用動態值

跟vue的動態模版不一樣，jsx中的動態使用的是單花括號{...}, 花括號指明一個JavaScript上下文環境，你再花括號裏面放入任何東西都會進行求值，因此不要在裏面 new... var...

對於簡單的值，你能夠直接在裏面放一個變量，就像這樣

var title = 'title'
<h1>{text}</h1>

對於更復雜的邏輯，你可能須要一個函數來執行邏輯，而後把值返回，像這樣

var getTitle = function () {
    if (xxxx) {
        return 'xxxx'
    } else {
        return 'xxxxx'
    }
}
<h1>{getTitle}</h1>

子節點

react將自定義組件的開始標籤到結束標籤之間的全部子節點都放在一個 this.props.children 的內置屬性裏面

而後組件你就能夠這樣寫

<div className="title">
    <h1>{this.props.chlidren}<h1>
</div>

而後你就能夠想html標籤同樣使用你的自定義組件

<Header>title</Header>

jsx和html有什麼不一樣

jsx很像html，可是jsx的設計並無參考html，我的認爲，即便沒有html jsx 也仍是這樣設計。

屬性

html中 咱們用內聯給標籤設置屬性，就像這樣

<p id="ha" class="haha">哈哈哈</p>

jsx 不只能夠實現靜態，也還能夠實現動態，就像這樣

<p id="haha" className={xxx: xxx}></p>

條件判斷

jsx的｛｝中只能寫表達式，並不能寫語句，那麼趕上這種狀況怎麼辦？

// 這種
<div>{if (isright) {'right'}}</div>

oh no 上面的寫法會直接忽略，那怎麼辦

解決辦法有下面3種

• 使用3目運算符? :
• 使用一個函數來完成具體操做
• 使用 && 運算符

三目運算符

<div>{isRight ？'right' : 'noRight'}</div>

使用函數

getIsRight: function () {
    if (this.isRight) {
        return 'right'
    } else {
        return 'noRight'
    }
}
<div>{this.isRight}</div>

使用&& 運算符

// 若是前面的值是true 呢麼這個表達式會返回&& 後面的值
<div>{this.isRight && 'right'}</div>

事件

handlerClick = function () {
    consoe.log('你點擊了我')
}
<div onClick={this.handleClick}>哈哈哈</div>

更多的jsx官方規範 請看這裏