Taro 介紹

簡介

Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。

現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業(yè)務要求同時在不同的端都要求有所表現(xiàn)的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動 小程序、快應用、H5、React-Native 等）運行的代碼。

特性

React 語法風格

Taro 遵循 React 語法規(guī)范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進行開發(fā)可以獲得和 React 一致的開發(fā)體驗。

代碼示例

import Taro, { Component } from "@tarojs/taro";
import { View, Button } from "@tarojs/components";

export default class Index extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      title: "首頁",
      list: [1, 2, 3]
    };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUpdate(nextProps, nextState) {}

  componentDidUpdate(prevProps, prevState) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  add = e => {
    // dosth
  };

  render() {
    return (
      <View className="index">
        <View className="title">{this.state.title}</View>
        <View className="content">
          {this.state.list.map(item => {
            return <View className="item">{item}</View>;
          })}
          <Button className="add" onClick={this.add}>
            添加
          </Button>
        </View>
      </View>
    );
  }
}

由于微信小程序端的限制，有極少數(shù) JSX 的優(yōu)秀用法暫時不能得到很好地支持，同時，為了遵循 React 語法，Taro 在寫法上也有一些自己的規(guī)范，具體可以參考：Taro 開發(fā)最佳實踐 。

快速開發(fā)微信小程序

Taro 立足于微信小程序開發(fā)，眾所周知小程序的開發(fā)體驗并不是非常友好，比如小程序中無法使用 npm 來進行第三方庫的管理，無法使用一些比較新的 ES 規(guī)范等等，針對小程序端的開發(fā)弊端，Taro 具有以下的優(yōu)秀特性

? 支持使用 npm/yarn 安裝管理第三方依賴

? 支持使用 ES7/ES8 甚至更新的 ES 規(guī)范，一切都可自行配置

? 支持使用 CSS 預編譯器，例如 Sass 等

? 支持使用 Redux 進行狀態(tài)管理

? 支持使用 MobX 進行狀態(tài)管理

? 小程序 API 優(yōu)化，異步 API Promise 化等等

支持多端開發(fā)轉化

Taro 方案的初心就是為了打造一個多端開發(fā)的解決方案。目前 Taro 代碼可以支持轉換到 微信/百度/支付寶/字節(jié)跳動/QQ/京東小程序 、快應用、 H5 端 以及 移動端（React Native）。

Taro UI

一款基于 Taro 框架開發(fā)的多端 UI 組件庫。

Taro UI 特性：

• 基于 Taro 開發(fā) UI 組件
• 一套組件可以在 微信小程序，支付寶小程序，百度小程序，H5 多端適配運行（ReactNative 端暫不支持）
• 提供友好的 API，可靈活的使用組件