三端开发调研之京东Taro

Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

使用 Taro，咱们能够只书写一套代码，再经过 Taro 的编译工具，将源代码分别编译出能够在不一样端（微信小程序、H五、App 端等）运行的代码。实现 一次编写，多端运行。

1. 和JDreact的关系

   Taro 是基于 Nerv.js 搞的。Nerv 是在 2017 年初就已经开发了的基于 virutal-dom 的 Web 框架，没有依赖任何第三方库。

2. 解决的痛点

   主要是将解决怎么将同一套web端代码适配日益兴起的各类小程序的问题

3. 支持端

• H5，微信小程序，百度智能小程序，支付宝小程序 ———————— 这些功能适配的很好

• APP端(基于Expo)【我的感受不是很好用，有点坑】———————— 有局限，Expo的局限就是Taro

上线项目示例：

现代前端开发流程

和微信自带的小程序框架不同，Taro 积极拥抱社区现有的现代开发流程，包括但不限于：

• NPM 包管理系统
• ES6+ 语法
• 自由的资源引用
• CSS 预处理器和后处理器（SCSS、Less、PostCSS）

对于微信小程序的编译流程，Taro从 Parcel 获得灵感，自研了一套打包机制将 AST 不断传递，所以代码分析的速度获得了很大的提升，而且保证一键傻瓜式命令编译，不增长入门或者学习门槛。

和 React 彻底一致的 API 和组件化系统

在 Taro 中，你不用像小程序同样区分什么是 App 组件，什么是 Page 组件，什么是 Component 组件，Taro 全都是 Component 组件，而且和 React 的生命周期彻底一致。能够说，一旦你掌握了 React，那就几乎掌握了 Taro。而学习 React 的资源也几乎是汗牛充栋，彻底不用担忧学不会。

Taro 和 React 同样，一样使用声明式的 JSX 语法。相比起字符串的模板语法，JSX 在处理精细复杂需求的时候会更驾轻就熟。

// 一个典型的 Taro 组件
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }
  
  componentWillMount () {}
  
  componentDidMount () {}
  
  componentWillUpdate (nextProps, nextState) {}
  
  componentDidUpdate (prevProps, prevState) {}
 
  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    const { list, title } = this.state
    return (
      <View className='index'>
        <View className='title'>{title}</View>
        <View className='content'>
          {list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}
复制代码

看代码咱们能够看出，Taro基于Nerv，同时结合微信小程序，React Native的优势，而且结合react-h5的代码编写优点，让咱们在基本上不改变编写习惯的同时，顺便过渡到Taro上面来，摒弃了react native里面编写样式那种变态且又臃肿的代码编写方式<没有彻底解决，没有彻底解决，没有彻底解决！！！>

Taro的H5端对于react.js的优点

Taro对于H5端的优点，不只仅有一套代码能够编译成其余端的自然开发优点外，还有NervJS的优点，主要有：

性能对比：

更多信息：https://nerv.aotu.io

Nerv产生的缘由：

平常开发中，相对于 Vue ，咱们更倾向于选择 React 模式做为咱们的开发标准，由于 React 天生组件化且函数式编程的方式，更加灵活且便于维护。 然而，React 仍然有一些不能知足咱们需求的地方：

• IE8 浏览器兼容性：当前环境所限，即使很不情愿，咱们仍然要支持 IE8。
• 体积：React 大概 130kb 的体积。在低网速 / 低版本浏览器 / 低配置设备的加载速度和解析速度都不能让咱们满意。
• 性能：React 的 Virtual Dom 算法（React 本身叫 Reconciler）并无作太多的优化。

而咱们的新轮子 —— Nerv，它彻底能提供上述 React 的全部优势，而且它也能彻底知足咱们本身的需求：更好的兼容性、更小的体积、更高的性能。

npm install nervjs --save
复制代码

从react迁移到Nerv

Nerv 提供了比 React 更好的浏览器兼容性和更高的性能，与此同时也不会放弃 React 庞大的生态系统。兼容 React 生态系统是开发 Nerv 的重要目标之一。

在webpack中只须要在 alias 把 nervjs 和 react、react-dom 关联起来便可：

{
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs'
    }
  }
}
复制代码

其余类工具能够参考：官网

Taro 的设计思路

作一款可以适配多端的解决方案，结合业务场景、技术选型和前端历史发展进程，咱们的解决方案必须知足下述要求：

• 代码多端复用，不只能运行在时下最热门的 H五、微信小程序、React Native，对其余可能会流行的端也留有余地和可能性。
• 完善和强大的组件化机制，这是开发复杂应用的基石。
• 与目前团队技术栈有机结合，有效提升效率。
• 学习成本足够低
• 背后的生态强大

同时知足这几个需求并不容易，在咱们通过充分地调研和思考以后发现只有 React 体系可以知足咱们的需求。而对于微信小程序而言，使用 React 彻底没有办法进行开发——直到咱们从 codemod 获得灵感：

也就是说，对于微信小程序这样不开放不开源的端，咱们能够先把 React 代码分析成一颗抽象语法树，根据这颗树生成小程序支持的模板代码，再作一个小程序运行时框架处理事件和生命周期与小程序框架兼容，而后把业务代码跑在运行时框架就完成了小程序端的适配。

对于 React 已经支持的端，例如 Web、React Native 甚至将来的 React VR，咱们只要包一层组件库再作些许样式支持便可。鉴于时下小程序的热度和咱们团队自己的业务侧重程度，组件库的 API 是以小程序为标准，其余端的组件库的 API 都会和小程序端的组件保持一致。

解释以下：

意思就是：用户根据基本上和react同样的语法，同时结合Taro本身的一套组件，像正常编写web同样去开发，最终根据用户输入命令，命令经过Taro转化器，将组件转化为相应平台的组件，语法仍是遵循react语法。

Taro组件有如下[能够在node_modules里@tarojs/components彻底找到]：

共27个，对比与react native，增长了一些web熟悉并经常使用的组件

转APP

Taro转APP主要仍是基于react native，而且结合神器Expo，转化为能够在APP中正常运行的项目

什么是Expo？？？

Expo是一组工具、库和服务，能够经过编写JavaScript来构建本地的ios和Android应用程序。

Expo Apps是包含了Expo SDK的react native Apps,SDK是一个native-and-js的库，它包提供对设备系统的访问功能，像照相机、联系人、本地存储和其余硬件）。这意味着你不须要使用Xcode或Android的环境，或写任何代码也使得你的pure-JS项目很是便携，由于它能够运行在任何天然环境包含Expo SDK。

Expo还提供UI组件来处理各类应用程序，几乎全部应用程序都将被覆盖，但它不会突破react native Core的核心代码，例如图标、模糊视图，等等。

最后，Expo SDK提供了访问服务，这些服务虽然很难管理，但几乎每一个应用程序都须要它。其中最受欢迎的是：Expo能够为您管理您的资产，它能够为您处理推送通知，而且它能够构建准备部署到应用程序商店的本地二进制文件。

说了这么多，什么意思啊？？？

就是我们平时开发，虽然写了一套代码，可是环境仍是要单独配置的，也就是说即便你用Mac开发，用react native开发APP的话，Xcode和安卓环境仍是要配置的，毕竟APP的运行和打包都是须要这样的环境的，可是有了Expo就不用了，他有本身的SDK，开发者不用关心是什么系统了，可是惟一的要求就是你用的是什么版本的React Native，就要安装对应版本的Expo SDK【Expo针对不一样的react native版本开发不一样版本对应的SDK】

说了这么多，其实开发者要干吗呢，怎么才能运行一个Taro项目呢，总结一下啊：

Taro建项目— 跑命令 taro build --type rn —watch — 出现上图 — 确保在和电脑统一域下用安卓或者iOS手机中的Expo APP扫上图码

不过我试了一下，还有其余方法，就是直接打开模拟器，并在模拟器中安装还Expo的APP，而且打开，这时候直接跑命令便可，整个过程还算顺利，不过想打开Expo这个APP，仍是有点门槛的，就是你得首先注册个帐号并登录，不过人家目的是为了更好的为你服务。传送->

贴一下网页端图片和APP图：

左侧是网页端，右侧是安卓模拟器中，能够看出来，基本上是OK的，可是因为不一样环境的APP端和H5端仍是有一写小差异呢，不过覆盖一下默认样式仍是能够解决的，可是还有一点比较重要的是，Taro若是转为App【React Native】的话，样式是不能嵌套的，就像和React Native中写样式是同样的，这样所谓的SASS或者LESS就没有了优点，实在解决不了的，只能用下面这种方法了：

ENV_TYPE.WEAPP 微信小程序环境

ENV_TYPE.SWAN 百度小程序环境

ENV_TYPE.ALIPAY 支付宝小程序环境

ENV_TYPE.TT 字节跳动小程序环境

ENV_TYPE.WEB WEB(H5)环境

ENV_TYPE.RN ReactNative 环境

总结

总体上上手仍是较顺手的，基于 codemod 的灵感，同时整合一些比较优秀的第三方库，实现了一套代码，通过编译，多端运行的目标，也遇到一些坑，好比缺乏webpack-runner,我试了一下缺的还蛮多，而且须要到node_modules下的@Taro文件夹下手动一个一个安装，不过仍是能慢慢解决的，算是一个解决三端问题比较好的一个解决方案。