在前文中：React - 功能介紹话告、安裝配置說明（附幾個(gè)簡(jiǎn)單的入門樣例），我演示了如何使用 ReactJS 進(jìn)行頁(yè)面開發(fā)。本文來著重介紹下 JSX乔煞。雖然 React 不強(qiáng)制我們一定要用 JSX熙侍，只用 JavaScript 也可以榄鉴。但使用 JSX 可以讓我們開發(fā)更加高效，代碼更加簡(jiǎn)潔核行。
JSX 即 JavaScript XML牢硅，是一種在React 組件內(nèi)部構(gòu)建標(biāo)簽的類 XML 語(yǔ)法。
JSX 并不是一門新的語(yǔ)言芝雪，僅僅是個(gè)語(yǔ)法糖（syntactic sugar）减余，允許開發(fā)者在 JavaScript 中書寫 HTML 語(yǔ)法。最后惩系，每個(gè) HTML 標(biāo)簽都轉(zhuǎn)化為 JavaScript 代碼來運(yùn)行位岔。
這樣對(duì)于使用 JavaScript 來構(gòu)建組件以及組件之間關(guān)系的應(yīng)用，在代碼層面顯得更加清晰堡牡。而不再像過于一樣用 JavsScript 操作 DOM 來創(chuàng)建組件以及組件之間的嵌套關(guān)系抒抬。
1. 運(yùn)行環(huán)境
- JSX 必須借助 ReactJS 環(huán)境才能運(yùn)行，所以使用前要先加載 ReactJS 文件（react.js晤柄、react-dom.js）
- 除了 ReactJS 環(huán)境擦剑，還需要加載 JSX 的解析器（browser.js）
具體的下載地址和加載方法，參考我之前的文章：React - 功能介紹、安裝配置說明（附幾個(gè)簡(jiǎn)單的入門樣例）
2. 載入方式
JSX 目前有兩種方法載入惠勒。
（1）內(nèi)聯(lián)方式載入
<script type="text/babel">
ReactDOM.render(
<h1>hello jianshu.com</h1>,
document.getElementById('example')
);
</script>
（2）外聯(lián)方式載入
即將 JSX 代碼單獨(dú)放在一個(gè).jsx 文件中赚抡。
ReactDOM.render(
<h1>hello jianshu.com</h1>,
document.getElementById('example')
);
然后在頁(yè)面上通過下面的方式引入這個(gè) .jsx 文件。
<script type="text/babel" src="hello.jsx"></script>
3纠屋，標(biāo)簽的使用
我們除了可以在 JavaScript 中書寫 HTML 標(biāo)簽外（不需要像以前那樣做為字符串用引號(hào)引起來）涂臣。
還可以使用那些由 ReactJS 創(chuàng)建的組件類標(biāo)簽。
var Hello = React.createClass({
render: function() {
return <div>歡迎</div>;
}
});
ReactDOM.render(
<Hello />,
document.getElementById('example')
);
比如上面的代碼中售担，我們創(chuàng)建了一個(gè)叫 Hello 的組件赁遗，此時(shí)我們就可以像使用 HTML 標(biāo)簽一樣，通過 <Hello/> 的方式把它引入進(jìn)來族铆。
注意：ReactJS 中約定自定義的組件標(biāo)簽首字母一定要大寫岩四，這樣便于區(qū)分是組件標(biāo)簽還是 HTML 標(biāo)簽。
4. 代碼轉(zhuǎn)換
使用 JSX 的書寫是為了讓我們能更直觀地看到組件的 DOM結(jié)果哥攘，其最終還是通過解析器轉(zhuǎn)化為 JavaScript 代碼才能在瀏覽器端執(zhí)行炫乓。
比如我們寫了如下一段代碼：
var msg = <h1 width="10px">hello jianshu.com</h1>;
那么解析器就會(huì)轉(zhuǎn)化為：
var msg = React.createElement("h1", {width: "10px"}, "hello jianshu.com");
也就是說我們每寫一個(gè)標(biāo)簽，就相當(dāng)于調(diào)用一次 React.createElement方法并最后返回一個(gè) ReactElement 對(duì)象給我們献丑。
當(dāng)然我們不使用 JSX末捣，而是直接通過 React.createElement 方法來創(chuàng)建 ReactElement 對(duì)象也是可以的。React.createElement 方法中各個(gè)參數(shù)的含義如下：
- 第一個(gè)參數(shù)：可以是一個(gè)字符串创橄，表示一個(gè)標(biāo)準(zhǔn)的 HTML 元素箩做。或者是一個(gè) ReactClass 類型的對(duì)象妥畏，表示我們之前封裝好的自定義組件邦邦。
- 第二個(gè)參數(shù)：是一個(gè)對(duì)象（字典）。它保存了這個(gè)元素的所有固有屬性（即傳入后基本不會(huì)改變的值）醉蚁。
- 從第三個(gè)參數(shù)開始：都被認(rèn)作是該元素的子元素燃辖。
5，執(zhí)行JavaScript表達(dá)式
在 JSX 中運(yùn)行 JavaScript 表達(dá)式网棍，需要將表達(dá)式用 {} 括起來黔龟。
比如下面我們先定義一個(gè)變量，再在 JSX 中調(diào)用該變量：
var str = "歡迎訪問jianshu.com";
var msg = <h1>{str}</h1>;
6滥玷，注釋
在 JSX 中氏身，注釋的使用和 JavaScript 是一樣的，也分為單行注釋和多行注釋惑畴。
var str = "歡迎訪問jianshu.com";
//<h1>{str}</h1>
/**
<h1>{str}</h1>
**/
7蛋欣，支持ES6功能
在 JSX 中，我們完全可以使用 ES6 的語(yǔ)法如贷。因?yàn)閺?qiáng)大的解析器會(huì)自動(dòng)對(duì)不支持 ES6 語(yǔ)法的瀏覽器做降級(jí)處理陷虎。比如下面樣例到踏，我們使用了 ES6 中的一個(gè)新語(yǔ)法“...”，其作用是遍歷對(duì)象的尚猿。
var props = {};
props.key1 = "1";
props.key2 = "2";
<h1 {...props} key1="3">jianshu.com</h1>
上面執(zhí)行后夭禽，h1 元素會(huì)有兩屬性：key1="3"、key2="2"谊路。（key1 本來是 1，但被后面定義的屬性給覆蓋變成 3）
8菩彬，自定義屬性
除了標(biāo)簽特有的屬性外缠劝，我們也可以自定義一些屬性。但這些自定義屬性在真正的頁(yè)面渲染后骗灶，是否會(huì)顯示在頁(yè)面上由如下規(guī)則決定：
- 凡是以 data- 開頭的自定義屬性惨恭，在頁(yè)面渲染后均可以顯示在頁(yè)面上。
- 非 data- 開頭的自定義屬性耙旦，頁(yè)面渲染后則不顯示脱羡。
比如我們使用 JSX 書寫如下代碼：
var msg = <h1 height="50" data-test1="test1" test2="test2">jianshu</h1>
最后渲染在頁(yè)面上的結(jié)果如下∶舛迹可以看到只有以 data- 開頭的自定義屬性被渲染到頁(yè)面上锉罐，其他自定義屬性則被忽略掉。
9绕娘，顯示HTML字符串
有時(shí)候我們需要顯示一段 HTML 字符串脓规，而不是 HTML 節(jié)點(diǎn)∠樟欤可以這么寫侨舆。
<div>{'<h1>這個(gè)是html字符串</h1>'}</div>
10，樣式的使用
（1）JSX 中的樣式是通過 style 屬性定義的绢陌。和傳統(tǒng) Web 定義不同的是挨下，它不再是一個(gè)字符串而是一個(gè) JavaScript 對(duì)象。
比如下面樣例脐湾，第一個(gè)大括號(hào)表示是 JSX 語(yǔ)法臭笆，第二個(gè)大括號(hào)是 JavaScript 對(duì)象。
<div style={{color:'#ff00ff', fontSize: '20px'}}>歡迎訪問jianshu.com</div>
（2）對(duì)于屬性名要轉(zhuǎn)為駝峰命名格式秤掌，如果不想轉(zhuǎn)的話耗啦，則需要加引號(hào)括起來。比如：'font-size':'20px'
（3）也可以通過 className='xxx' 的方式引入樣式机杜。（切記是 className 而不是 class）
11帜讲，事件綁定
代碼如下。JSX 支持所有的 HTML 元素的事件椒拗。但要注意的是似将，事件名稱一定要用駝峰命名方式获黔，如果將 onClick 改成 onclick 就不起作用了。
div id="example"></div>
<script type="text/babel">
function testClick() {
alert("點(diǎn)擊了按鈕!");
}
var app = <button onClick={testClick.bind(this)} style={{fontSize: '28px'}}>
按鈕
</button>
ReactDOM.render(
app,
document.getElementById('example')
);
</script>
（2）bind 方法第一個(gè)參數(shù)是用來設(shè)置作用域的在验。如果要給綁定的事件傳遞參數(shù)玷氏，可以從 bind 方法第二個(gè)參數(shù)起放置我們需要傳遞的參數(shù)。
function testClick(value) {
alert(value);
}
var app = <button onClick={testClick.bind(this,'我是參數(shù)')} style={{fontSize: '28px'}}>
按鈕
</button>
ReactDOM.render(
app,
document.getElementById('example')
);
