使用React框架遇到的坑及解決方法

這是我的原創文章，原始地址：http://h5shop.org/article/50/

最近在公司的一個移動端WEB產品中使用了React這個框架（并不是React-Native），記錄一下在開發過程中遇到的各種問題以及對應的解決方法，希望能對讀者有所幫助。

React原則

React不多做介紹，就是非死book的一個開源JS框架，專注的層面為View層，不包括數據訪問層或者那種Hash路由（不過React 有插件支持），與Angularjs，Emberjs等大而全的框架不同，React專注的中心是Component，即組件，React認為一切頁面元 素都可以抽象成組件，比如一個表單，或者表單中的某一項。

常用技術要點

props

每一個組件都有可變與不可變的屬性，props就是不可變的屬性，當props改變時，組件的繪制方法不會被調用。

states

states就是組件的可變屬性，states的改變會觸發組件的render函數，react與其他mvvm框架的最大的不同點就是，react 組件可以想象成一個狀態機，狀態的改變會重繪UI，然后根據 dom diff 算法來繪制UI，而其他的mvvm框架則是對js對象的dirty check（Angularjs）或者defineProperty時指定的回調函數（Emberjs），因此，狀態機制與dom diff的存在聲稱React更快。

我們在設計React組件時如何靈活的運用props與state是一個非常關鍵的要點。

refs

refs這個點主要用在上級組件調用下級組件的場景，這個場景非常多見。

componentDidMount

組件UI渲染完畢后調用，常用在這種業務場景：調用ajax獲得數據后，渲染UI。

state的改變會觸發render

正如上文中所說，React組件是一個一個狀態機，state的改變會改變狀態，會觸發重繪，對于state的設計是對React組件設計的關鍵。

各種坑

觸摸事件

React中的觸摸事件僅用三種，touchstart, touchend, touchend，可是這種會有問題，有時候我需要滾動頁面的時候，很容易觸發某一個元素的touchend事件，為此筆者找了一個React第三方組件，React-tappable。

還無意中發現一個Android與iOS的不同之處

input在disable且readonly之后，onClick會在iOS上觸發不起來，onTouchEnd又會在Android上把鍵盤彈出來，這邊筆者做了個Hack，iOS下用onTouchEnd，Android下用onClick，就正常了。

高級技術要點

mixin

曾經跟一個朋友討論，封裝utils模塊為純js模塊好還是React式的模塊好的問題，他給我了一個概念，React mixin，本來自己在開發中確實寫了很多可復用的小組件，但由于沒有過多的了解React周邊的相關知識，因此忽略了React mixin，筆者認為以后可以探究一下這個技術點。