Taro 1.3 震撼發佈：全面支持 JSX 語法和 HOOKS

時間 2019-11-05

標籤 taro 1.3 震撼發佈全面支持 jsx 語法 hooks 简体版

原文原文鏈接

在 Taro 1.2 發佈以後，Taro 在業界收穫了巨大的讚譽和關注：GitHub 上 Star 數量超過 19000 粒，NPM 下載量也穩居同類開發框架之首，同時 Taro 團隊也和騰訊、百度、華爲等數十家業界巨頭的研發團隊展開了深刻和有效的合做。html

Taro 1.3 是咱們醞釀最久的版本：經歷了橫跨 6 個月的開發時間，近 2000 次的代碼提交，近百位開發者的共同參與。咱們終於在今天驕傲地發佈了 Taro 1.3。react

Taro 1.3 的特性包括但不限於：git

支持快應用和 QQ 小程序的開發
全面支持 JSX 語法和 React Hooks
大幅提升 H5 性能和可用性
Taro Doctor

支持快應用和 QQ 小程序的開發

快應用的開發模式很是特別，它的 API、組件系統、組件庫和其餘小程序端差別很是大，而且快應用只是一個標準，各家安卓廠商對運行時的實現也各不相同。而這塊「硬骨頭」終於也被 Taro 啃下了。github

QQ 小程序做爲新興的小程序類容器，你們廣泛對它知之甚少，但 Taro 也率先實現了對 QQ 小程序的支持。數據庫

支持快應用和 QQ 小程序意味着 Taro 真正對業界主流小程序實現了「全覆蓋」，無論你的業務要支持哪個小程序端，只要維護一套代碼，Taro 就能生成對應小程序平臺的代碼。同時 Taro 也成爲了業界首個同時支持微信小程序、百度智能小程序、字節跳動小程序、支付寶小程序、快應用、QQ 小程序共 6 端小程序的開發框架。redux

全面支持 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: github.com/NervJS/taro…微信小程序

TodoMVC: github.com/NervJS/taro…設計模式

全新生命週期和 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 還作了許多額外的工做，這些工做可能對平常開發影響不大，但爲 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>
  )
}
複製代碼