React使用总结
两种架构现在使用React的开发模式主要有两种——freeMarker+React以及纯静态React页面开发。本文着重介绍纯静态React页面的开发方式。 freeMarker+React由于以前是用YUI+freeMarker进行开发,为了保证以前的页面都能够正常访问,当重构老页面时会使用这种开发方式。 React纯静态页面利用browserify使用同构的方式进行开发,直接产出html以及js文件放置到资源文件中通过文件路径访问页面。采用这种方式开发有以下优点:
需要注意代码能同时在browser与node环境下执行,否则会出问题。当使用bom对象时,在componentDidMount生命周期中运行,此时node环境下已经完成了first render。 构建方式在node环境下通过 应用架构采用flux的思想来组织应用,具体的方案我推荐facebook的flux或者reflux,这也是现在Github中获星最多的flux实现方案。两者的主要区别是reflux不通过Dispatcher来控制action的分发,reflux中使用了较多的magic来使得代码更加简洁高效。 如果项目的复杂程度不高(没有多个互相关联的store),我推荐使用Reflux,一般情况下其实一个store就够了,而且避免了处理store之间的通信问题。 ╔═════════╗ ╔════════╗ ╔═════════════════╗ ║ Actions ║──────>║ Stores ║──────>║ View Components ║ ╚═════════╝ ╚════════╝ ╚═════════════════╝ ^ │ └──────────────────────────────────────┘ 若项目较为庞大,考虑到代码的可控性、直观,以及更好地去控制各store之间的响应逻辑,使用flux更合适。 优点采用flux来构建应用有以下优势:
组件开发
setStatestate为key-value的集合,一般来说value都是基本类型,当state的数据结构层次很深的时候,操作state就会变成很头疼的事情。 深拷贝 // shallow copy var state = deepCopy(this.state); state.valueWantChange = vale; this.setState(state); 深拷贝方法没有问题,但由于deepCopy效率很低,一般都不推荐使用。 forceUpdate this.state.valueWantChange = vale; this.forceUpdate(); // this.setState(this.state); 在以下两种情况会用到 forceUpdate
但是使用forceUpdate 会跳过 shouldComponentUpdate 的过程,会触发子组件的所有lifeCycle方法(包括shouldComponentUpdate)从而造成性能的浪费。因此为了组件更加清晰高效,应该避免使用forceUpdate。 Immutability Helpers 我推荐使用React.addons来管理 import react from 'react/addons' var newData = React.addons.update(myData,{ x: {y: {z: {$set: 7}}},a: {b: {$push: [9]}} }); this.setState(newData); 下面是update的基本语法。如果用过mongo应该对此十分熟悉。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |