JSX中的事件監(jiān)聽函數(shù)怎么綁定作用域

作為使用 React 和 JSX 語(yǔ)法的開發(fā)框架，Taro 早期的版本在編譯器和編輯器檢查工具都對(duì)語(yǔ)法做了高強(qiáng)度的限制。而在 Taro 1.3 中，開發(fā)者可以充分發(fā)揮自己的創(chuàng)造力和想象力，可以任意地寫 if-else，可以任意地寫匿名函數(shù)，可以把 JSX 放在類函數(shù)中，也可以放在普通函數(shù)中，等等。只要編譯器和和 ESLint 不報(bào)錯(cuò)，就可以這么寫。

雖然 React Hooks 正式穩(wěn)定的時(shí)間并不長(zhǎng)，但我們認(rèn)為這個(gè)特性能有效地簡(jiǎn)化開發(fā)模式，提升開發(fā)效率和開發(fā)體驗(yàn)。即便 Hooks 的生態(tài)和最佳實(shí)踐還尚未完善，但我們相信未來(lái) Hooks 會(huì)成為 React 開發(fā)模式的主流，也會(huì)深刻地影響其它框架未來(lái)的 API 構(gòu)成。

在 Taro 1.3 我們還實(shí)現(xiàn)了 React 16 的新生命周期函數(shù) static getDerivedStateFromProps() 和 getSnapshotBeforeUpdate()。當(dāng)新的生命周期函數(shù)注入到類組件時(shí)，老的生命周期函數(shù)將不會(huì)被調(diào)用，沒有使用新的生命周期函數(shù)則不會(huì)影響原有生命周期的調(diào)用。就多數(shù)情況而言，我們更推薦使用新的生命周期來(lái)構(gòu)建你的類組件，因?yàn)檫@樣能減少一次渲染和更新的開銷。更多詳細(xì)信息可以查看 相關(guān)文檔。

Taro 1.3 還實(shí)現(xiàn)了 React 16 的 createContext、contextType 和 useContext API。新 Context 通過(guò)聲明式的 API 來(lái)傳遞組件的更新，使得 Taro 跨組件通信和共享狀態(tài)更為直觀。同時(shí)，例如 react-redux 這樣的熱門庫(kù)也正在基于 Context 和 Hooks 進(jìn)行重構(gòu)，我們也非常期待與社區(qū)一起探索 React/Taro 新的開發(fā)與設(shè)計(jì)模式。

作為除微信小程序之外需求量最高的端，我們一直都部署了重要的開發(fā)戰(zhàn)力在 H5 端。而在 Taro 1.3 中，我們優(yōu)化了編譯代碼的方式，實(shí)現(xiàn)了資源最小引入和按需引入，將原有最小項(xiàng)目的編譯大小降低了 80% 左右。這對(duì)于網(wǎng)絡(luò)狀況不佳的 H5 端無(wú)疑是巨大的提升。

H5 端的 API 數(shù)量和質(zhì)量也得到了大幅地增長(zhǎng)，Taro 1.3 新增了 28 個(gè) H5 API，解決了上百個(gè) H5 相關(guān)的 issue。

關(guān)于 H5 端性能更感興趣可以查看文章:《決戰(zhàn)性能之巔 - Taro H5 轉(zhuǎn)換與優(yōu)化升級(jí)》。

我們還從 Flutter Doctor 中得到啟發(fā)，開發(fā)了 Taro Doctor。 Taro Doctor 就像一個(gè)醫(yī)生一樣，可以診斷項(xiàng)目的依賴、設(shè)置、結(jié)構(gòu)，以及代碼的規(guī)范是否存在問題，并嘗試給出解決方案。

但和真正的醫(yī)生不一樣，Taro Doctor 不需要排隊(duì)掛號(hào)，也不用花錢。你只需要在終端運(yùn)行命令：taro doctor，就像圖里一樣：

除了以上的特性之外，Taro 1.3 還做了許多額外的工作，這些工作可能對(duì)日常開發(fā)影響不大，但為 Taro 的穩(wěn)定性以及將來(lái)更多的可能性夯實(shí)了基礎(chǔ)：

在  Taro 1.0 到 1.2 的小程序端，我們一直使用原生小程序框架的組件傳參系統(tǒng)，但小程序組件系統(tǒng)沒辦法傳遞函數(shù)的值，也無(wú)法傳遞非具名參數(shù)，并且各小程序組件的實(shí)現(xiàn)各不相同。為了解決這些問題，在 Taro 1.3 中我們自己實(shí)現(xiàn)了一套組件傳參系統(tǒng)。新系統(tǒng)會(huì)使得傳參相關(guān)的代碼更為可靠，同時(shí)也是我們支持更多 JSX 語(yǔ)法的基礎(chǔ)。

在 Taro 1.3，我們將命令行工具使用 TypeScript 進(jìn)行了重構(gòu)并逐步添加更多測(cè)試用例。重構(gòu)之后我們可以更加大膽地為 CLI 添加新功能，替換老舊依賴。同時(shí)我們也會(huì)將 CLI 的功能以 API 的形式暴露出來(lái)，賦能給其它開發(fā)工具和我們的合作伙伴。

我們和京東的 ARES) 團(tuán)隊(duì)合作，把原有的移動(dòng)端容器 expo 替換為深度定制的 JDReact。JDReact 大幅提升了 Taro 移動(dòng)端的可控性，可以讓我們突破 expo 的掣肘，引入原生移動(dòng)端代碼，提供定制功能和 API，并且性能和穩(wěn)定性的表現(xiàn)都會(huì)更好。

小程序插件是小程序帶來(lái)的一個(gè)非常優(yōu)秀的特性，可以極大地提高代碼復(fù)用率，降低包大小，為開發(fā)者帶來(lái)諸多便利，目前微信、支付寶小程序已經(jīng)支持插件功能。而從 1.3 版本開始，Taro 支持直接開發(fā)微信與支付寶小程序插件，這意味著 Taro 項(xiàng)目將和小程序插件無(wú)縫對(duì)接，不再有開發(fā)模式切換的成本。

「小程序·云開發(fā)」是微信小程序聯(lián)合騰訊云團(tuán)隊(duì)提供的一個(gè)非常強(qiáng)大的功能，它是一款 Serverless 服務(wù)，為開發(fā)者提供了「云函數(shù)」、「云數(shù)據(jù)庫(kù)」和「云文件存儲(chǔ)」三大能力，并且將這些能力封裝成特定的接口，可以幫助開發(fā)者快速構(gòu)建微信小程序的后端服務(wù)。為了讓 Taro 開發(fā)者能夠享受到「小程序·云開發(fā)」的能力，Taro 也加入了對(duì)「小程序·云開發(fā)」的支持，為「小程序·云開發(fā)」提供了初始化模板，并且將小程序云相關(guān)的 API 進(jìn)行了封裝，方便開發(fā)者進(jìn)行使用。同時(shí)，「小程序·云開發(fā)」已提供 H5 版本的 SDK，Taro 支持將小程序、H5 的調(diào)用方式進(jìn)行統(tǒng)一封裝，幫助開發(fā)者快速打造 Serverless 的多端應(yīng)用。

正如前面所提到，Taro 1.3 是一個(gè)醞釀時(shí)間最久，擁有特性最多的大版本，對(duì) Taro 底層也進(jìn)行了不小的重構(gòu)，所以，1.3 版本的升級(jí)帶了以下 2 個(gè)兼容性問題。

在之前的 Taro 版本中，JSX 中綁定的事件監(jiān)聽函數(shù)，是可以不需要綁定任何作用域，就能訪問到組件實(shí)例的，例如

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}>點(diǎn)擊</Button>
      </View>
    )
  }
}

上述例子中，<Button /> 按鈕綁定的點(diǎn)擊事件，在之前版本中是能夠正常執(zhí)行的，Taro 會(huì)默認(rèn)將 clickHandler 的作用域綁定為當(dāng)前組件實(shí)例，但是這并不符合 React 中的實(shí)際情況，所以，在 1.3 版本中，我們對(duì)這一問題進(jìn)行了修復(fù)，現(xiàn)在 JSX 中的事件監(jiān)聽函數(shù)必須綁定作用域，否則就會(huì)報(bào)錯(cuò)。

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

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

或者你也可以在 constructor 中將函數(shù)進(jìn)行提前綁定作用域，

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

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

還有一種做法是，將 clickHandler 寫成箭頭函數(shù)，這種方式在新舊版本中均可以正常運(yùn)行。

在之前版本中，使用 Taro 編譯后的組件是可以直接用在原生項(xiàng)目中的，以提升復(fù)用性，但 1.3 版本由于組件的 props 系統(tǒng)徹底重構(gòu)了，升級(jí) 1.3 后暫時(shí)無(wú)法在原生項(xiàng)目中使用 Taro 組件，我們正在積極處理這個(gè)問題，在后續(xù)版本中將繼續(xù)支持這一特性。