React判斷一個(gè)元素是否是HTML元素還是React組件元素的原則就是看第一個(gè)字母是否大寫(xiě)考润，如果是大寫(xiě)的話那么就會(huì)按照J(rèn)SX的處理方式來(lái)解析這個(gè)元素箫踩；如果是小寫(xiě)的話惦界，那么就會(huì)被認(rèn)為是一個(gè)HTML原生元素垫桂，所以不需要對(duì)其進(jìn)行什么轉(zhuǎn)譯操作。正是由于兩者的處理方式不同专控，所以我們需要切記：React元素的名字必須大寫(xiě)開(kāi)頭抹凳；HTML元素必須以小寫(xiě)開(kāi)頭。
1.為什么需要給事件處理函數(shù)顯式的綁定環(huán)境對(duì)象
我們?cè)趓eact組件中經(jīng)常會(huì)遇見(jiàn)某些非原生的事件處理函數(shù)會(huì)需要將它的環(huán)境對(duì)象綁定到我們的React組件元素上伦腐，這里解答兩個(gè)疑問(wèn)赢底。疑問(wèn)1：為什么這些非原生的事件處理函數(shù)需要將其環(huán)境對(duì)象綁定到React實(shí)例化的組件元素上呢？首先柏蘑，并不是所有的事件處理函數(shù)都需要將其環(huán)境對(duì)象綁定到React實(shí)例化的組件元素上幸冻，在下面那些情況下是必須的，那就是當(dāng)我們的事件處理函數(shù)內(nèi)部具有處理這個(gè)React實(shí)例組件操作的邏輯時(shí)才需要將其環(huán)境對(duì)象硬綁定為React實(shí)例組件辩越。
疑問(wèn)2：為什么這個(gè)事件處理函數(shù)的執(zhí)行環(huán)境不是指向React實(shí)例化的組件嘁扼？要知道我們定義的處理函數(shù)所處的位置是在React組件構(gòu)造類的內(nèi)部呀，黔攒，但是這又能怎么樣呢趁啸。。通過(guò)之前的學(xué)習(xí)環(huán)境對(duì)象學(xué)習(xí)我們就知道督惰，一個(gè)普通函數(shù)（箭頭函數(shù)除外）的環(huán)境對(duì)象指向誰(shuí)并不由函數(shù)定義的位置決定不傅，而是由函數(shù)被調(diào)用的位置所決定。那么問(wèn)題來(lái)了赏胚，我們定義的事件處理函數(shù)是在哪里被調(diào)用的呢访娶？被誰(shuí)所調(diào)用呢？由于事件處理函數(shù)是作為參數(shù)傳入事件監(jiān)聽(tīng)器里面的觉阅，所以我覺(jué)得事件處理函數(shù)的調(diào)用方式就是普通調(diào)用崖疤。對(duì)于一個(gè)普通調(diào)用函數(shù)，他的環(huán)境對(duì)象總是指向window典勇。經(jīng)過(guò)例子驗(yàn)證后劫哼，發(fā)現(xiàn)情況并不是這樣的，在我驗(yàn)證的這種情況下割笙，事件處理函數(shù)的環(huán)境對(duì)象指著null权烧。總之伤溉，無(wú)論如何事件處理函數(shù)的環(huán)境對(duì)象并不一定指向React構(gòu)造函數(shù)實(shí)例化出來(lái)的那個(gè)對(duì)象般码。下面看一看那個(gè)驗(yàn)證代碼：
class T0607_0 extends Component{
constructor(props){
super(props)
}
clickHander(event){
alert(Object.prototype.toString.call(this))//[object Null]
alert(event.target)//[object HTMLButtonElement]
}
render(){
return (
<div><button onClick = {this.clickHander}>click</button></div>
)
}
}
當(dāng)然，目前為止我也搞不懂為什么環(huán)境對(duì)象是Null乱顾，這個(gè)問(wèn)題大概留到以后吧板祝。
2.怎么給事件處理函數(shù)綁定環(huán)境對(duì)象為實(shí)例化出來(lái)的組件
要達(dá)到這一目標(biāo)，其實(shí)是有聽(tīng)多辦法的走净，比如說(shuō)
- 以箭頭函數(shù)的方式定義一個(gè)事件處理函數(shù)扔字，這樣子做是最為省力的一種做法囊嘉。缺點(diǎn)的話目前不知道。如下所示：
class Test extends Component{
constructor(props){
super(props)
}
clickHander = (event) => {
alert(Object.prototype.toString.call(this))//[object Object]
alert(event.target)//[object HTMLButtonElement]
}
render(){
return (
<div><button onClick = {this.clickHander}>click</button></div>
)
}
}
- 以普通函數(shù)的形式定義事件處理函數(shù)革为，接著再到構(gòu)造函數(shù)里面對(duì)事件處理函數(shù)的執(zhí)行環(huán)境進(jìn)行硬綁定扭粱。如下所示：
class T0607_0 extends Component{
constructor(props){
super(props)
this.clickHander = this.clickHander.bind(this)
}
clickHander(event){
alert(Object.prototype.toString.call(this))//[object Object]
alert(event.target)//[object HTMLButtonElement]
}
render(){
return (
<div><button onClick = {this.clickHander}>click</button></div>
)
}
}
輕濤拍打著長(zhǎng)堤，輕的就像張潔結(jié)的發(fā)絲震檩。
她解開(kāi)了束發(fā)的緞帶琢蛤，讓晚風(fēng)吹亂她的頭發(fā)，吻在楚留香面頰上抛虏，脖子上博其。
發(fā)絲輕柔，輕的就像是堤下的浪濤迂猴。
