Taro 1.3 震撼更新：全面支援 JSX 文法和 HOOKS

- 支援快應用和 QQ 小程式的開發
- 全面支援 JSX 文法和 React Hooks
- 全新生命周期和 Context API
- 大幅提高 H5 性能和可用性
- Taro Doctor
- 還有更多
- - 元件傳參（props）系統重構
  - 指令行工具（CLI）重構
  - 移動端容器更換
  - 支援開發小程式插件
  - 支援「小程式·雲開發」
- 更新相容性
- - - JSX 中的事件監聽函數必須綁定作用域
    - 暫時無法在原生應用中使用 Taro 元件
- 在架構之外

在 Taro 1.2 釋出之後，Taro 在業界收獲了巨大的贊譽和關注：GitHub 上 Star 數量超過 19000 粒，NPM 下載下傳量也穩居同類開發架構之首，同時 Taro 團隊也和騰訊、百度、華為等數十家業界巨頭的研發團隊展開了深入和有效的合作。

Taro 1.3 是我們醞釀最久的版本：經曆了橫跨 6 個月的開發時間，近 2000 次的代碼送出，近百位開發者的共同參與。我們終于在今天驕傲地釋出了 Taro 1.3。

Taro 1.3 的特性包括但不限于：

支援快應用和 QQ 小程式的開發
全面支援 JSX 文法和 React Hooks
大幅提高 H5 性能和可用性
Taro Doctor

支援快應用和 QQ 小程式的開發

快應用的開發模式非常特别，它的 API、元件系統、元件庫和其他小程式端差異非常大，并且快應用隻是一個标準，各家安卓廠商對運作時的實作也各不相同。而這塊「硬骨頭」終于也被 Taro 啃下了。

QQ 小程式作為新興的小程式類容器，大家普遍對它知之甚少，但 Taro 也率先實作了對 QQ 小程式的支援。

支援快應用和 QQ 小程式意味着 Taro 真正對業界主流小程式實作了「全覆寫」，不管你的業務要支援哪一個小程式端，隻要維護一套代碼，Taro 就能生成對應小程式平台的代碼。同時 Taro 也成為了業界首個同時支援微信小程式、百度智能小程式、位元組跳動小程式、支付寶小程式、快應用、QQ 小程式共 6 端小程式的開發架構。

Taro 1.3 震撼更新：全面支援 JSX 文法和 HOOKS

全面支援 JSX 文法和 React Hooks

作為使用 React 和 JSX 文法的開發架構，Taro 早期的版本在編譯器和編輯器檢查工具都對文法做了高強度的限制。而在 Taro 1.3 中，開發者可以充分發揮自己的創造力和想象力，可以任意地寫

if-else

，可以任意地寫匿名函數，可以把 JSX 放在類函數中，也可以放在普通函數中，等等。隻要編譯器和和 ESLint 不報錯，就可以這麼寫。

雖然 React Hooks 正式穩定的時間并不長，但我們認為這個特性能有效地簡化開發模式，提升開發效率和開發體驗。即便 Hooks 的生态和最佳實踐還尚未完善，但我們相信未來 Hooks 會成為 React 開發模式的主流，也會深刻地影響其它架構未來的 API 構成。是以我們優先把 React Hooks 帶到了 Taro 中，還寫了兩個小例子展示如何在 Taro 中使用 Hooks：

V2EX: https://github.com/NervJS/taro-v2ex-hooks

TodoMVC: https://github.com/NervJS/taro-todomvc-hooks

Taro 1.3 震撼更新：全面支援 JSX 文法和 HOOKS

全新生命周期和 Context API

在 Taro 1.3 我們還實作了 React 16 的新生命周期函數

static getDerivedStateFromProps()

和

getSnapshotBeforeUpdate()

。當新的生命周期函數注入到類元件時，老的生命周期函數将不會被調用，沒有使用新的生命周期函數則不會影響原有生命周期的調用。就多數情況而言，我們更推薦使用新的生命周期來建構你的類元件，因為這樣能減少一次渲染和更新的開銷。更多詳細資訊可以檢視相關文檔。

Taro 1.3 還實作了 React 16 的

createContext

、

contextType

和

useContext

API。新 Context 通過聲明式的 API 來傳遞元件的更新，使得Taro 跨元件通信和共享狀态更為直覺。同時，例如

react-redux

這樣的熱門庫也正在基于

Context

和

Hooks

進行重構，我們也非常期待與社群一起探索 React/Taro 新的開發與設計模式。

大幅提高 H5 性能和可用性

作為除微信小程式之外需求量最高的端，我們一直都部署了重要的開發戰力在 H5 端。而在 Taro 1.3 中，我們優化了編譯代碼的方式，實作了資源最小引入和按需引入，将原有最小項目的編譯大小降低了 80% 左右。這對于網絡狀況不佳的 H5 端無疑是巨大的提升。

H5 端的 API 數量和品質也得到了大幅地增長，Taro 1.3 新增了 28 個 H5 API，解決了上百個 H5 相關的 issue。

關于 H5 端性能更感興趣可以檢視文章:《決戰性能之巅 - Taro H5 轉換與優化更新》。

Taro Doctor

我們還從 Flutter Doctor 中得到啟發，開發了 Taro Doctor。 Taro Doctor 就像一個醫生一樣，可以診斷項目的依賴、設定、結構，以及代碼的規範是否存在問題，并嘗試給出解決方案。

但和真正的醫生不一樣，Taro Doctor 不需要排隊挂号，也不用花錢。你隻需要在終端運作指令：

taro doctor

，就像圖裡一樣：

Taro 1.3 震撼更新：全面支援 JSX 文法和 HOOKS

還有更多

除了以上的特性之外，Taro 1.3 還做了許多額外的工作，這些工作可能對日常開發影響不大，但為 Taro 的穩定性以及将來更多的可能性夯實了基礎：

元件傳參（props）系統重構

在 Taro 1.0 到 1.2 的小程式端，我們一直使用原生小程式架構的元件傳參系統，但小程式元件系統沒辦法傳遞函數的值，也無法傳遞非具名參數，并且各小程式元件的實作各不相同。為了解決這些問題，在 Taro 1.3 中我們自己實作了一套元件傳參系統。新系統會使得傳參相關的代碼更為可靠，同時也是我們支援更多 JSX 文法的基礎。

指令行工具（CLI）重構

在 Taro 1.3，我們将指令行工具使用 TypeScript 進行了重構并逐漸添加更多測試用例。重構之後我們可以更加大膽地為 CLI 添加新功能，替換老舊依賴。同時我們也會将 CLI 的功能以 API 的形式暴露出來，賦能給其它開發工具和我們的合作夥伴。

移動端容器更換

我們和京東的 ARES 團隊合作，把原有的移動端容器 expo 替換為深度定制的 JDReact。JDReact 大幅提升了 Taro 移動端的可控性，可以讓我們突破

expo

的掣肘，引入原生移動端代碼，提供定制功能和 API，并且性能和穩定性的表現都會更好。

支援開發小程式插件

小程式插件是小程式帶來的一個非常優秀的特性，可以極大地提高代碼複用率，降低包大小，為開發者帶來諸多便利，目前微信、支付寶小程式已經支援插件功能。而從 1.3 版本開始，Taro 支援直接開發微信與支付寶小程式插件，這意味着 Taro 項目将和小程式插件無縫對接，不再有開發模式切換的成本。

支援「小程式·雲開發」

「小程式·雲開發」是微信小程式聯合騰訊雲團隊提供的一個非常強大的功能，它是一款 Serverless 服務，為開發者提供了「雲函數」、「雲資料庫」和「雲檔案存儲」三大能力，并且将這些能力封裝成特定的接口，可以幫助開發者快速建構微信小程式的後端服務。為了讓 Taro 開發者能夠享受到「小程式·雲開發」的能力，Taro 也加入了對「小程式·雲開發」的支援，為「小程式·雲開發」提供了初始化模闆，并且将小程式雲相關的 API 進行了封裝，友善開發者進行使用。同時，「小程式·雲開發」已提供 H5 版本的 SDK，Taro 支援将小程式、H5 的調用方式進行統一封裝，幫助開發者快速打造 Serverless 的多端應用。

更新相容性

正如前面所提到，Taro 1.3 是一個醞釀時間最久，擁有特性最多的大版本，對 Taro 底層也進行了不小的重構，是以，1.3 版本的更新帶了以下 2 個相容性問題。

JSX 中的事件監聽函數必須綁定作用域

在之前的 Taro 版本中，JSX 中綁定的事件監聽函數，是可以不需要綁定任何作用域，就能通路到元件執行個體的，例如

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Test extends Component {
  state = {
    hello: 'noclick'
  }
  clickHandler () {
    this.setState({
      hello: 'click'
    })
  }

  render () {
    return (
      <View className={styles.index}>
        <Button onClick={this.clickHandler}>點選</Button>
      </View>
    )
  }
}

上述例子中，

<Button />

按鈕綁定的點選事件，在之前版本中是能夠正常執行的，Taro 會預設将

clickHandler

的作用域綁定為目前元件執行個體，但是這并不符合 React 中的實際情況，是以，在 1.3 版本中，我們對這一問題進行了修複，現在 JSX 中的事件監聽函數必須綁定作用域，否則就會報錯。

上述代碼中 JSX 部分可以修改為如下

render () {
  return (
    <View className={styles.index}>
      <Button onClick={this.clickHandler.bind(this)}>點選</Button>
    </View>
  )
}

或者你也可以在

constructor

中将函數進行提前綁定作用域，

constructor () {
  this.clickHandlerBind = this.clickHandler.bind(this)
}

render () {
  return (
    <View className={styles.index}>
      <Button onClick={this.clickHandlerBind}>點選</Button>
    </View>
  )
}

還有一種做法是，将

clickHandler

寫成箭頭函數，這種方式在新舊版本中均可以正常運作。

暫時無法在原生應用中使用 Taro 元件

在之前版本中，使用 Taro 編譯後的元件是可以直接用在原生項目中的，以提升複用性，但 1.3 版本由于元件的 props 系統徹底重構了，更新 1.3 後暫時無法在原生項目中使用 Taro 元件，我們正在積極處理這個問題，在後續版本中将繼續支援這一特性。

在架構之外

Taro 團隊除了 1.3 版本中完善多端适配，提高架構開發體驗和開發效率之外，我們還在生态建設上付出了諸多努力，其中包括全新更新的官網，物料/插件市場，獨立的社群/論壇。

我們認為，Taro 能夠安身立命的本錢是作為開發架構的硬實力，但真正決定 Taro 能走多遠卻是生态、社群以及合作夥伴。

我們在 1.3 已經把實力大幅增強，現在邀請你一起參與或觀察 Taro 在生态和社群的建設：

Taro 官網：https://taro.jd.com
Taro 物料市場: https://taro-ext.jd.com
Taro 社群：https://taro-club.jd.com
GitHub: https://github.com/NervJS/taro

Taro 1.3 震撼更新：全面支援 JSX 文法和 HOOKS