jsx語法是react提供一種長得比較像html標(biāo)簽的一中語法，本質(zhì)上是跟html標(biāo)簽是有區(qū)別的辣辫。
我們自定義的組件要是有大寫開頭命名比如 <HelloMessage /> 這種自定義命名渴逻，如果是些小寫的話桥氏，react會當(dāng)成是div這種到dom中尋找就會出錯效拭，react對大小寫是敏感的
在render方法中寫jsx語法匆篓，使用大括號如：
{this.props.name}
# 在大括號里只能寫求值表達(dá)式浑度，不能寫if語句這些，但是我們可以把語句包含一個函數(shù)中奕删，
# 函數(shù)本身返回是一個求值表達(dá)式俺泣，這樣使用并不是一個好的習(xí)慣，
# 不過可以把函數(shù)獨(dú)立出來完残，然后大括號里調(diào)用
# jsx標(biāo)簽名命名使用的是駝峰命名伏钠，函數(shù)名使用的也是駝峰命名
如果我們要使用 html標(biāo)簽中 class html 屬性 ，react里jsx語法中需要使用 className htmlFor 來代替的
下面看一下在jsx中添加注釋
在子節(jié)點中添加注釋：
render(){
return(
<p
/*
在屬性中注釋
*/
>Hello, World {
/*
多行注釋
*/
// 單行注釋
}</p>
)
}
# 樣式調(diào)用使用方法谨设，react是把樣式當(dāng)做一個個對象處理
<p style={styles}></p>
添加語句判斷四種寫法
//第一種方法使用三元表達(dá)式
render(){
return(
<p>{this.props.name ? this.props.name : 'world'}</p>
)
}
//第二種方法使用變量
getName(){
if(this.props.name){
return this.props.name
}else{
return 'world';
}
}
render(){
var name = this.getName();
return(
<p>Hello, {name}</p>
)
}
//第三種方法是直接在大括號中調(diào)用函數(shù)熟掂，因為函數(shù)調(diào)用本身是一種表達(dá)式
getName(){
if(this.props.name){
return this.props.name
}else{
return 'world';
}
}
render(){
return(
<p>Hello, {this.getName()}</p>
)
//第四種是使用比較運(yùn)算符，如果左邊的值是true就直接返回扎拣，
//如果是左邊值是假false那就一定會返回右邊的值
render(){
return(
<p>Hello, { this.props.name || 'world' }</p>
)
#萬能函數(shù)表達(dá)式赴肚，在大括號里寫函數(shù)
#大括號里第一小括號（）可以理解成強(qiáng)制求值運(yùn)算，然后函數(shù)后面添加里（this）是調(diào)用這個函數(shù)然后傳入this二蓝，這個方法并不建議使用
render(){
return(
<p> Hello,
{
(function(obj){
if (obj.props.name)
return obj.props.name
else
return 'World'
})(this)
}
</p>
)
}
非 DOM 屬性介紹
react引入里三個非DOM屬性
dangerouslySetInnerHTML：在JSX中直接插入HTML代碼（插入動態(tài)html代碼使用誉券，不過這個屬性比較危險）
ref：父組件引用子組件
key： 提高渲染性能，就是節(jié)點上插入標(biāo)識
#演示
var rawHTML = {
__html: "<h1>Hello, World</h1>"
};
#react在處理的時候 刊愚，會讀取html代碼
React.render(
<div dangerouslySetInnerHTML={ rawHTML }></div>,
document.body
)
#如果在組件內(nèi)部操作p節(jié)點踊跟，這樣引用它，拿到的是虛擬DOM節(jié)點
var HelloWorld = React.createClass({
this.refs.childp
render: function(){
return <p ref="childp"> Hello, World </p>
}
})
#在同一個組件內(nèi)鸥诽，key是不能同的商玫，還有就是如果是列表就一定加入key箕憾，不但提高性能
var HelloWorld = React.createClass({
render: function(){
return <ul>
<li key="1">1</li>
<li key="1">1</li>
<li key="1">1</li>
</ul>
}
})
