1谴咸、DOM 事件的 API 只有 DOM 結(jié)構(gòu)才能用轮听。
我們需要 DOM 結(jié)構(gòu)，準(zhǔn)確地來說：我們需要這個(gè)點(diǎn)贊功能的 HTML 字符串表示的 DOM 結(jié)構(gòu)岭佳。
JSX描述UI信息
2血巍、要記住幾個(gè)點(diǎn)：
1）JSX 是 JavaScript 語言的一種語法擴(kuò)展，長得像 HTML珊随，但并不是 HTML述寡。
2）React.js 可以用 JSX 來描述你的組件長什么樣的。
3）JSX 在編譯的時(shí)候會(huì)變成相應(yīng)的 JavaScript 對(duì)象描述叶洞。
4）react-dom 負(fù)責(zé)把這個(gè)用來描述 UI 信息的 JavaScript 對(duì)象變成 DOM 元素鲫凶，并且渲染到頁面上。
3京办、在 JSX 當(dāng)中你可以插入 JavaScript 的表達(dá)式掀序，表達(dá)式返回的結(jié)果會(huì)相應(yīng)地渲染到頁面上。表達(dá)式用 {} 包裹惭婿。{} 內(nèi)可以放任何 JavaScript 的代碼不恭，包括變量、表達(dá)式計(jì)算财饥、函數(shù)執(zhí)行等等换吧。 render 會(huì)把這些代碼返回的內(nèi)容如實(shí)地渲染到頁面上，非常的靈活钥星。
組件的組合沾瓦、嵌套和組件樹
4、我們可以把組件的內(nèi)容封裝好谦炒，然后靈活在使用在任何組件內(nèi)贯莺。另外這里要注意的是，自定義的組件都必須要用大寫字母開頭宁改，普通的 HTML 標(biāo)簽都用小寫字母開頭缕探。
組件可以和組件組合在一起，組件內(nèi)部可以使用別的組件还蹲。就像普通的 HTML 標(biāo)簽一樣使用就可以爹耗。這樣的組合嵌套耙考，最后構(gòu)成一個(gè)所謂的組件樹，就正如上面的例子那樣潭兽，Index 用了 Header倦始、Main、Footer山卦，Header 又使用了 Title 鞋邑。這樣用這樣的樹狀結(jié)構(gòu)表示它們之間的關(guān)系：
事件監(jiān)聽
5、在 React.js 不需要手動(dòng)調(diào)用瀏覽器原生的 addEventListener 進(jìn)行事件監(jiān)聽账蓉。React.js 幫我們封裝好了一系列的 on* 的屬性炫狱，當(dāng)你需要為某個(gè)元素監(jiān)聽某個(gè)事件的時(shí)候，只需要簡單地給它加上 on* 就可以了药薯。而且你不需要考慮不同瀏覽器兼容性的問題见芹，React.js 都幫我們封裝好這些細(xì)節(jié)了。
沒有經(jīng)過特殊處理的話，這些 on* 的事件監(jiān)聽只能用在普通的 HTML 的標(biāo)簽上涤躲，而不能用在組件標(biāo)簽上。也就是說撬腾，<Header onClick={…} /> 這樣的寫法不會(huì)有什么效果的枫甲。
6、和普通瀏覽器一樣限番，事件監(jiān)聽函數(shù)會(huì)被自動(dòng)傳入一個(gè) event 對(duì)象舱污，這個(gè)對(duì)象和普通的瀏覽器 event 對(duì)象所包含的方法和屬性都基本一致。不同的是 React.js 中的 event 對(duì)象并不是瀏覽器提供的弥虐，而是它自己內(nèi)部所構(gòu)建的扩灯。React.js 將瀏覽器原生的 event 對(duì)象封裝了一下，對(duì)外提供統(tǒng)一的 API 和屬性霜瘪，這樣你就不用考慮不同瀏覽器的兼容性問題珠插。
7、一般在某個(gè)類的實(shí)例方法里面的 this 指的是這個(gè)實(shí)例本身颖对。但是你在上面的 handleClickOnTitle 中把 this 打印出來捻撑，你會(huì)看到 this 是 null 或者 undefined。這是因?yàn)?React.js 調(diào)用你所傳給它的方法的時(shí)候缤底，并不是通過對(duì)象方法的方式調(diào)用（this.handleClickOnTitle）顾患，而是直接通過函數(shù)調(diào)用 （handleClickOnTitle），所以事件監(jiān)聽函數(shù)內(nèi)并不能通過 this 獲取到實(shí)例个唧。如果你想在事件函數(shù)當(dāng)中使用當(dāng)前的實(shí)例江解，你需要手動(dòng)地將實(shí)例方法 bind 到當(dāng)前實(shí)例上再傳入給 React.js。
<h1 onClick={this.handleClickOnTitle.bind(this)}>React 小書</h1>
bind還可以同時(shí)傳遞參數(shù)坑鱼。
這種 bind 模式在 React.js 的事件監(jiān)聽當(dāng)中非常常見膘流，bind 不僅可以幫我們把事件監(jiān)聽方法中的 this 綁定到當(dāng)前組件實(shí)例上絮缅；還可以幫助我們?cè)谠阡秩玖斜碓氐臅r(shí)候，把列表元素傳入事件監(jiān)聽函數(shù)當(dāng)中
state和setState
8呼股、setState 方法由父類 Component 所提供耕魄。當(dāng)我們調(diào)用這個(gè)函數(shù)的時(shí)候，React.js 會(huì)更新組件的狀態(tài) state 彭谁，并且重新調(diào)用 render 方法吸奴，然后再把 render 方法所渲染的最新的內(nèi)容顯示到頁面上。
注意缠局，當(dāng)我們要改變組件的狀態(tài)的時(shí)候则奥，不能直接用 this.state = xxx 這種方式來修改，如果這樣做 React.js 就沒辦法知道你修改了組件的狀態(tài)狭园，它也就沒有辦法更新頁面读处。所以，一定要使用 React.js 提供的 setState 方法唱矛，它接受一個(gè)對(duì)象或者函數(shù)作為參數(shù)罚舱。
傳入一個(gè)對(duì)象的時(shí)候，這個(gè)對(duì)象表示該組件的新狀態(tài)绎谦。但你只需要傳入需要更新的部分就可以了管闷，而不需要傳入整個(gè)對(duì)象。
9窃肠、這里還有要注意的是包个，當(dāng)你調(diào)用 setState 的時(shí)候，React.js 并不會(huì)馬上修改 state冤留。而是把這個(gè)對(duì)象放到一個(gè)更新隊(duì)列里面碧囊，稍后才會(huì)從隊(duì)列當(dāng)中把新的狀態(tài)提取出來合并到 state 當(dāng)中，然后再觸發(fā)組件更新纤怒。
在使用 React.js 的時(shí)候呕臂，并不需要擔(dān)心多次進(jìn)行 setState 會(huì)帶來性能問題。
