React.js 要點

這是個人原創文章，原始地址：http://lpgray.me/article/50/

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

React原則

React很少作介紹，就是Facebook的一個開源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，筆者認爲之後能夠探究一下這個技術點。