京东Taro框架深度实践

前言

Taro是凹凸实验室遵循 React 语法规范的多端开发方案，Taro 目前已对外开源一段时间，受到了前端开发者的广泛欢迎和关注。截止目前 star 数已经突破11.2k，还在开启的 Issues 达 200多个，已经关闭700多个，可见使用并参与讨论的开发者是非常多的。Taro 目前已经支持微信小程序、H5、RN、支付宝小程序、百度小程序，持续迭代中的 Taro，也正在兼容更多的端以及增加一些新特性的支持。

回归正题，本篇文章主要讲的是 Taro 深度开发实践，综合我们在实际项目中使用 Taro 的一些经验和总结，首先会谈谈 Taro 为什么选择使用React语法，然后再从Taro项目的代码组织、数据状态管理、性能优化以及多端兼容等几个方面来阐述 Taro 的深度开发实践体验。

为什么选择使用React语法？

这个要从两个方面来说，一是小程序原生的开发方式不够友好，或者说不够工程化，在开发一些大型项目时就会显得很吃力，主要体现在以下几点：

• 一个小程序页面或组件，需要同时包含 4 个文件，以至开发一个功能模块时，需要多个文件间来回切换；

• 没有自定义文件预处理，无法直接使用 Sass、Less 以及较新的 ES Next 语法；

• 字符串模板太过孱弱，小程序的字符串模板仿的是 Vue，但是没有提供 Vue 那么多的语法糖，当实现一些比较复杂的处理时，写起来就非常麻烦，虽然提供了 wxs 作为补充，但是使用体验还是非常糟糕；

• 缺乏测试套件，无法编写测试代码来保证项目质量，也就不能进行持续集成，自动化打包。

原生的开发方式不友好，自然就想要有更高效的替代方案。所以我们将目光投向了市面上流行的三大前端框架React、Vue、Angular 。Angular在国内的流行程度不高，我们首先排除了这种语法规范。而类 Vue 的小程序开发框架市面上已经有一些优秀的开源项目，同时我们部门内的技术栈主要是 React，那么 React 语法规范 也自然成为了我们的第一选择。除此之外，我们还有以下几点的考虑：

• React 一门非常流行的框架，也有广大的受众，使用它也能降低小程序开发的学习成本；

• 小程序的数据驱动模板更新的思想与实现机制，与 React 类似；

• React 采用 JSX 作为自身模板，JSX 相比字符串模板来说更加自由，更自然，更具表现力，不需要依赖字符串模板的各种语法糖，也能完成复杂的处理；

• React 本身有跨端的实现方案 ReactNative，并且非常成熟，社区活跃，对于 Taro 来说有更多的多端开发可能性。

综上所述，Taro 最终采用了 React 语法 来作为自己的语法标准，配合前端工程化的思想，为小程序开发打造了更加优雅的开发体验。

Taro项目的代码组织

要进行 Taro 的项目开发，首先自然要安装 taro-cli，具体的安装方法可参照文档(https://nervjs.github.io/taro/docs/GETTING-STARTED.html)，这里不做过多介绍了，默认你已经装好了 taro-cli 并能运行命令。

然后我们用 cli 新建一个项目，得到的项目模板如下：

├── dist                   编译结果目录├── config                 配置目录|   ├── dev.js             开发时配置|   ├── index.js           默认配置|   └── prod.js            打包时配置├── src                    源码目录|   ├── pages              页面文件目录|   |   ├── index          index页面目录|   |   |   ├── index.js   index页面逻辑|   |   |   └── index.css  index页面样式|   ├── app.css            项目总通用样式|   └── app.js             项目入口文件└── package.json

如果是十分简单的项目，用这样的模板便可以满足需求，在 index.js 文件中编写页面所需要的逻辑。

假如项目引入了 redux，例如我们之前开发的项目，目录则是这样的：

├── dist                   编译结果目录├── config                 配置目录|   ├── dev.js             开发时配置|   ├── index.js           默认配置|   └── prod.js