用React实现移动端单页应用
2016-05-02 22:31
393 查看
项目介绍
具体的业务背景就不用介绍了,这里只介绍涉及技术方面的东西。项目背景:项目涉及多个子页面,而多个子页面之间存在或多或少的数据传输。
技术介绍
技术方案单页应用
基于 React
技术方案理由
单页应用
单页:可以很方便地在一个页面生命周期内控制子页面之间的数据传输。
非单页:子页面之间的交互,在兼容性面前,更多会考虑URL传输。而这种方式面对某个需要其他子页面数据来填充自身表单的子页面来说,就不是一个好办法,因为数据量很可能很大,让URL很长。
综上,选择单页方式实现。
基于React
新开发方式的尝试
如果是传统方式开发也未尝不可,前端新东西层出不穷,很多人把react捧得很高,但我之前对它也仅仅是听众的角色,“纸上得来终觉浅,绝知此事要躬行”。
我得试试,感受一下。
组件化开发
这个方案对于开发单页应用来说很直观,只需将各个子页面当做一个组件,再拆分更细的组件即可。
省了不少劲啊。
虚拟DOM
内网上有人说过,很多问题都可以通过引入第三方的方式解决。而React的虚拟DOM就是被引入了一个介于数据和真实DOM之间的第三方,做
diff等操作,进而减少对DOM的全部重绘几率。
对于其性能我并没有看中太多,页面没有达到必须通过虚拟DOM来提高性能的程度。
这种引入“第三方”的思想是我比较中意的。
技术点
多个子页面之间的数据交互实现方案
引入
Redux组件,并统一存储所有页面数据(
store.js)。
理由
不引入
Redux的话,只能依赖
React的默认数据传输路径:
parent-->child只能通过
props传输。
如果有A组件和B组件,二者内部的子组件想要通信就很困难(还是可以通过全局事件实现的,但略丑陋)。
利用
Redux,就可以通过“A组件(及子组件)监听数据变化事件和B组件(及子组件)触发数据变化事件”的方式进行数据传输。
UI即时反应数据的变化
React本身即支持数据变化即时同步到UI(
setState)。
案例:口碑地图选址
移动地图获得推荐地址后,数据变化及时同步到UI上。
前端路由(子页面之间跳转)
用组件定义子页面的一个好处,就是子页面之间的跳转变得尤其方便。想从A页面跳到B页面,用:
ReactDom.render(<A/>, dom)变为
ReactDom.render(<B />, dom)即可。个人觉得比非React方式的
display:none;或者销毁制,在开发上要方便一些。
性能优化
个人经验,在性能优化的目标上,我也是针对的各个组件进行优化,比如销毁组件(
componentWillUnmount)前做一些销毁数据等性能优化的动作。
积少成多,把每一个盒子(组件)优化好了,总体性能不至于太差。
一些感想
使用新技术是有试错成本的,包括时间成本。在用React时我也花了不少时间找坑。对新技术我的态度是保持关注,快速了解,但在成熟前持谨慎引入态度。相关文章推荐
- [android] 轮播图-滑动图片标题焦点
- ListView从入门到中级,android菜鸟级别,
- Missing iOS Distribution signing identity for
- android客户端和php服务简单交互
- Android手机客户端与服务器端的信息通信交互
- Android之Activity
- Cocos2d 植物大战僵尸游戏解析
- Android Studio 进阶详细配置
- 菜逼的Unity学习笔记(二)
- iOS --Runtime机制
- 【Unity】11.8 关节
- 【Unity】11.7 布料
- 【Unity】11.6 恒定力 (Constant Force)
- 【Unity】11.5 物理材质 (Physics Material)
- 解决Android Studio倒入项目或者打开项目卡死
- 【Unity】11.4 车轮碰撞体(Wheel Collider)
- 【Unity】11.3 基本碰撞体(箱体、球形、胶囊、网格)
- 【Unity】11.2 刚体(Rigidbody)
- Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enable
- android 小技巧