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，笔者认为之后能够探究一下这个技术点。