在 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
快應用的開發模式非常特別,它的 API、組件系統、組件庫和其他小程序端差異非常大,並且快應用只是一個標準,各家安卓廠商對運行時的實現也各不相同。而這塊「硬骨頭」終於也被 Taro 啃下了。
QQ 小程序作為新興的小程序類容器,大家普遍對它知之甚少,但 Taro 也率先實現了對 QQ 小程序的支持。
支持快應用和 QQ 小程序意味著 Taro 真正對業界主流小程序實現了「全覆蓋」,不管你的業務要支持哪一個小程序端,只要維護一套代碼,Taro 就能生成對應小程序平台的代碼。同時 Taro 也成為了業界首個同時支持微信小程序、百度智能小程序、位元組跳動小程序、支付寶小程序、快應用、QQ 小程序共 6 端小程序的開發框架。
作為使用 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 我們還實現了 React 16 的新生命周期函數static getDerivedStateFromProps()和 getSnapshotBeforeUpdate() 。當新的生命周期函數注入到類組件時,老的生命周期函數將不會被調用,沒有使用新的生命周期函數則不會影響原有生命周期的調用。就多數情況而言,我們更推薦使用新的生命周期來構建你的類組件,因為這樣能減少一次渲染和更新的開銷。更多詳細信息可以查看[相關文檔]。
Taro 1.3 還實現了 React 16 的 createContext 、 contextType 和 useContext API。新 Context 通過聲明式的 API 來傳遞組件的更新,使得Taro 跨組件通信和共享狀態更為直觀。同時,例如 react-redux 這樣的熱門庫也正在基於 Context 和 Hooks 進行重構,我們也非常期待與社區一起探索 React/Taro 新的開發與設計模式。
作為除微信小程序之外需求量最高的端,我們一直都部署了重要的開發戰力在 H5 端。而在 Taro 1.3 中,我們優化了編譯代碼的方式,實現了資源最小引入和按需引入,將原有最小項目的編譯大小降低了 80% 左右。這對於網路狀況不佳的 H5 端無疑是巨大的提升。
H5 端的 API 數量和質量也得到了大幅地增長,Taro 1.3 新增了 28 個 H5 API,解決了上百個 H5 相關的 issue。
關於 H5 端性能更感興趣可以查看文章:《決戰性能之巔 - Taro H5 轉換與優化升級》。
我們還從 Flutter Doctor 中得到啟發,開發了 Taro Doctor。 Taro Doctor 就像一個醫生一樣,可以診斷項目的依賴、設置、結構,以及代碼的規範是否存在問題,並嘗試給出解決方案。
但和真正的醫生不一樣,Taro Doctor 不需要排隊挂號,也不用花錢。你只需要在終端運行命令: taro doctor ,就像圖裡一樣:
除了以上的特性之外,Taro 1.3 還做了許多額外的工作,這些工作可能對日常開發影響不大,但為 Taro 的穩定性以及將來更多的可能性夯實了基礎:
在 Taro 1.0 到 1.2 的小程序端,我們一直使用原生小程序框架的組件傳參系統,但小程序組件系統沒辦法傳遞函數的值,也無法傳遞非具名參數,並且各小程序組件的實現各不相同。為了解決這些問題,在 Taro 1.3 中我們自己實現了一套組件傳參系統。新系統會使得傳參相關的代碼更為可靠,同時也是我們支持更多 JSX 語法的基礎。
在 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 個兼容性問題。
在之前的 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 編譯后的組件是可以直接用在原生項目中的,以提升復用性,但 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
本文經授權轉載自凹凸實驗室公眾號
[admin
]