用 React 实现移动端单页应用

[hoperyy]

项目介绍

具体的业务背景就不用介绍了，这里只介绍涉及技术方面的东西。

项目背景：项目涉及多个子页面，而多个子页面之间存在或多或少的数据传输。

技术介绍

• 技术方案
  • 单页应用
  • 基于 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 时我也花了不少时间找坑。对新技术我的态度是保持关注，快速了解，但在成熟前持谨慎引入态度。

基础真的不能丢啊，设计模式、数据结构、项目管理等等也是要花大力气的。

新技术与基础，都要给点资源。

前端发展确实挺快。