1、JSX的介紹
什么是JSX：JSX=javascript xml就是Javascript和XML結(jié)合的一種格式。是 JavaScript 的語(yǔ)法擴(kuò)展，只要你把HTML代碼寫(xiě)在JS里，那就是JSX。
在實(shí)際開(kāi)發(fā)中，JSX 在產(chǎn)品*打包階段*都已經(jīng)編譯成純 JavaScript，不會(huì)帶來(lái)任何副作用，反而會(huì)讓代碼更加直觀并易于維護(hù)。官方定義是：類(lèi) XML 語(yǔ)法的 ECMAScript 擴(kuò)展。
2、特點(diǎn)：
JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。
它是類(lèi)型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫(xiě)模板更加簡(jiǎn)單快速。
3、JSX的語(yǔ)法
SX就是把html代碼寫(xiě)在javascript中，那么，寫(xiě)在javascript中有啥要求（與原來(lái)在html中的區(qū)別），這就是jsx語(yǔ)法要說(shuō)的內(nèi)容。
示例：
var msg="哥們！"
const element = <h1>Hello, world!{msg}</h1> 沒(méi)有雙引號(hào)，不是字符串
const List = () => (
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
);
XML基本語(yǔ)法
- 只能有一個(gè)根標(biāo)簽，養(yǎng)成外面加上圓括號(hào)的習(xí)慣。
- 標(biāo)簽要閉合（單邊標(biāo)簽得有斜杠）
元素類(lèi)型 - 小寫(xiě)首字母對(duì)應(yīng) HTML的標(biāo)簽，組件名首字母大寫(xiě)。
- 注釋使用 / * 內(nèi)容 * / html標(biāo)簽內(nèi)注釋?zhuān)? * 最外層有花括號(hào)*/｝
元素屬性 - 內(nèi)聯(lián)樣式的style：樣式名以駝峰命名法表示, 如font-size需寫(xiě)成fontSize。默認(rèn)像素單位是 px（px不用寫(xiě)）
let _style = {backgroundColor:"red"}; ReactDOM.render( <h1 style={_style}>Hello, world!</h1>, document.getElementById('box') ); - 外部樣式的class：HTML中曾經(jīng)的 class 屬性改為 className（因?yàn)閏lass是js的關(guān)鍵字），外部樣式時(shí)使用
ReactDOM.render( <h1 className="bluebg">Hello, world!</h1>, document.getElementById('box') );
for 屬性改為 htmlFor（因?yàn)閒or是js的關(guān)鍵字）。（for屬性在html標(biāo)簽中是擴(kuò)充單(復(fù)選框)選框的選擇范圍）
事件名用駝峰命名法。HTML是全小寫(xiě)（onclick），JSX中是駝峰(onClick)
javascript表達(dá)式
-
使用單花括號(hào)。
react里沒(méi)有vue中的指令，任何地方需要javascript的變量（表達(dá)式），只需要套上 單花括號(hào)就行。
const element = <h1>Hello, {120+130}!</h1> const element = <h1>Hello, {getName("張三瘋")}!</h1> <input type="text" value={val ? val : ""} /> let _style = { backgroundColor:"hotpink" } <div style={_style}>我是div</div>注意：?jiǎn)位ɡㄌ?hào)里只能寫(xiě)表達(dá)式，不能寫(xiě)語(yǔ)句（如：if，for）
總結(jié)：
對(duì)比vue，JSX相當(dāng)于把vue組件里的template和javascript代碼混寫(xiě)在一起，而vue中有很多的指令，react中只需要使用單花括號(hào)就行。
ReactDOM.render()函數(shù)
ReactDOM.render 是 React 的最基本方法。用于將JSX寫(xiě)的模板轉(zhuǎn)為 HTML 語(yǔ)言，并渲染到指定的HTML標(biāo)簽里。
ReactDOM.render( JSX寫(xiě)的html模板，dom對(duì)象);
總結(jié)：一個(gè)react的程序，就是把JSX通過(guò)ReactDOM.render()函數(shù)渲染到網(wǎng)頁(yè)上。
程序員完成的是JSX的編寫(xiě)。
條件渲染
var sex='女';
if(sex=='男'){
var sexJSX=<p>我是男的</p>;
}else{
var sexJSX=<p>我是女的</p>;
}
ReactDOM.render(
<ul>
{sexJSX}
</ul>,
document.getElementById('box')
);
注意：if語(yǔ)句不要寫(xiě)在單花括號(hào)里。
列表渲染
1）、渲染數(shù)組：
//數(shù)組里存放jsx
var arr=[
<li>張三瘋</li>,
<li>張四瘋</li>,
<li>張五瘋</li>
]
const show = ()=> (
<ul>{arr}</ul>
)
ReactDOM.render(show(),document.getElementById("box"));
2）使用Javascript的map（）或者普通for循環(huán)進(jìn)行列表的渲染
//普通for循環(huán)
let arr = ["鉛筆","油筆","鋼筆","毛筆"];
var arr2 =[];
for(let i in arr){
arr2.push(<li>{arr[i]}</li>);
}
const show = ()=> (
<ul>{arr2}</ul>
)
ReactDOM.render(show(),document.getElementById("box"));
//map
const goods = ['鉛筆','鋼筆'];
const goodsJSX = goods.map(function(val,index){
return <li>{val}</li>
});
ReactDOM.render(
//以下相當(dāng)于react里的模板，不能出現(xiàn)js的語(yǔ)句，可以有表達(dá)式
<ul>
{goodsJSX}
</ul>,
document.getElementById('box')
);
