React 事件與表單

事件命名為駝峰式，事件處理方法命名駝峰式 handleclick， handlechange

事件類型

基本事件處理 example

react對原生事件進行了一次封裝，命名為 syntheticevent，具備和原生事件相同的屬性

通用屬性

特殊屬性舉例

冒泡特性舉列

例如有一個登陸框，我們想要在點選登陸框以外的範圍時将登陸框關閉

我們先在 document 上添加 click 事件處理 logindialog 的隐藏，然後在 logindialog 中也監聽 click 事件，然後利用 stopimmediatepropagation 阻止相同元素上的同類型事件，就能實作需求的效果。

可見 react 的事件都是代理在 document 上的。由上面代碼可以看出，如果我們把事件監聽放在 document.body 上時，logindialog 中的阻止同類型事件觸發就失效了。

一個例子來比較異步處理事件時原生和 syntheticevent 的差別

syntheticevent 持久化相關 react 源碼解析

syntheticevent 對象會在處理完判斷 ispersistent，為 false 就釋放對象

release 的相關實作，它會調用對象的 destructor 方法

syntheticevent 的析構函數實作，将屬性置為了 null

而 syntheticevent 中 persist 方法做的就是将 ispersistent 變為一個傳回 true 的函數

表單是運用事件的一個很好的場景， 我們來看一個基本的表單實作

如果我們運作上面的代碼會發現，render 會輸出很多次，每一次 state 變動都會觸發重新 render，這可能會對性能造成一定的影響。

同時這樣的表單在表單值控制，表單校驗的能力上都較弱，是以我們看看有沒有什麼更好地實作

運作這個執行個體上看，我們直接改變了 inputcomponent 的 state 進而不觸發外部 form 的 render， 相關資料和操作由 context 傳入，

能夠很好地對驗證時機和表單資料進行控制

redux-form 的例子

redux-form 用 field 來替代了每個輸入域，那我們重點來看下 field

connectedfield 會關聯 _reduxform 的 initialvalues, getformstate， 看看 _reduxform 從何而來，是用 context 從上層傳遞下來的，詳見如下代碼

總體下來看，redux-from 和我們自己上面自己實作的那個進階一點的 form 原理是不是微微有點像呢~，它也是将一個 _reduxform 由 context 傳遞到子元件然後将子元件的 state 托管到 _reduxform 裡面