這篇文章主要講解了“JSX中的事件監(jiān)聽函數(shù)怎么綁定作用域”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“JSX中的事件監(jiān)聽函數(shù)怎么綁定作用域”吧!
成都創(chuàng)新互聯(lián)于2013年成立,先為南通等服務(wù)建站,南通等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為南通企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
作為使用 React 和 JSX 語法的開發(fā)框架,Taro 早期的版本在編譯器和編輯器檢查工具都對語法做了高強度的限制。而在 Taro 1.3 中,開發(fā)者可以充分發(fā)揮自己的創(chuàng)造力和想象力,可以任意地寫 if-else
,可以任意地寫匿名函數(shù),可以把 JSX 放在類函數(shù)中,也可以放在普通函數(shù)中,等等。只要編譯器和和 ESLint 不報錯,就可以這么寫。
雖然 React Hooks 正式穩(wěn)定的時間并不長,但我們認為這個特性能有效地簡化開發(fā)模式,提升開發(fā)效率和開發(fā)體驗。即便 Hooks 的生態(tài)和最佳實踐還尚未完善,但我們相信未來 Hooks 會成為 React 開發(fā)模式的主流,也會深刻地影響其它框架未來的 API 構(gòu)成。
在 Taro 1.3 我們還實現(xiàn)了 React 16 的新生命周期函數(shù) static getDerivedStateFromProps()
和 getSnapshotBeforeUpdate()
。當新的生命周期函數(shù)注入到類組件時,老的生命周期函數(shù)將不會被調(diào)用,沒有使用新的生命周期函數(shù)則不會影響原有生命周期的調(diào)用。就多數(shù)情況而言,我們更推薦使用新的生命周期來構(gòu)建你的類組件,因為這樣能減少一次渲染和更新的開銷。更多詳細信息可以查看 相關(guān)文檔。
Taro 1.3 還實現(xiàn)了 React 16 的 createContext
、contextType
和 useContext
API。新 Context 通過聲明式的 API 來傳遞組件的更新,使得 Taro 跨組件通信和共享狀態(tài)更為直觀。同時,例如 react-redux
這樣的熱門庫也正在基于 Context
和 Hooks
進行重構(gòu),我們也非常期待與社區(qū)一起探索 React/Taro 新的開發(fā)與設(shè)計模式。
作為除微信小程序之外需求量最高的端,我們一直都部署了重要的開發(fā)戰(zhàn)力在 H5 端。而在 Taro 1.3 中,我們優(yōu)化了編譯代碼的方式,實現(xiàn)了資源最小引入和按需引入,將原有最小項目的編譯大小降低了 80% 左右。這對于網(wǎng)絡(luò)狀況不佳的 H5 端無疑是巨大的提升。
H5 端的 API 數(shù)量和質(zhì)量也得到了大幅地增長,Taro 1.3 新增了 28 個 H5 API,解決了上百個 H5 相關(guān)的 issue。
關(guān)于 H5 端性能更感興趣可以查看文章:《決戰(zhàn)性能之巔 - Taro H5 轉(zhuǎn)換與優(yōu)化升級》。
我們還從 Flutter Doctor 中得到啟發(fā),開發(fā)了 Taro Doctor。 Taro Doctor 就像一個醫(yī)生一樣,可以診斷項目的依賴、設(shè)置、結(jié)構(gòu),以及代碼的規(guī)范是否存在問題,并嘗試給出解決方案。
但和真正的醫(yī)生不一樣,Taro Doctor 不需要排隊掛號,也不用花錢。你只需要在終端運行命令:taro doctor
,就像圖里一樣:
除了以上的特性之外,Taro 1.3 還做了許多額外的工作,這些工作可能對日常開發(fā)影響不大,但為 Taro 的穩(wěn)定性以及將來更多的可能性夯實了基礎(chǔ):
在 Taro 1.0 到 1.2 的小程序端,我們一直使用原生小程序框架的組件傳參系統(tǒng),但小程序組件系統(tǒng)沒辦法傳遞函數(shù)的值,也無法傳遞非具名參數(shù),并且各小程序組件的實現(xiàn)各不相同。為了解決這些問題,在 Taro 1.3 中我們自己實現(xiàn)了一套組件傳參系統(tǒng)。新系統(tǒng)會使得傳參相關(guān)的代碼更為可靠,同時也是我們支持更多 JSX 語法的基礎(chǔ)。
在 Taro 1.3,我們將命令行工具使用 TypeScript 進行了重構(gòu)并逐步添加更多測試用例。重構(gòu)之后我們可以更加大膽地為 CLI 添加新功能,替換老舊依賴。同時我們也會將 CLI 的功能以 API 的形式暴露出來,賦能給其它開發(fā)工具和我們的合作伙伴。
我們和京東的 ARES) 團隊合作,把原有的移動端容器 expo 替換為深度定制的 JDReact。JDReact 大幅提升了 Taro 移動端的可控性,可以讓我們突破 expo
的掣肘,引入原生移動端代碼,提供定制功能和 API,并且性能和穩(wěn)定性的表現(xiàn)都會更好。
小程序插件是小程序帶來的一個非常優(yōu)秀的特性,可以極大地提高代碼復(fù)用率,降低包大小,為開發(fā)者帶來諸多便利,目前微信、支付寶小程序已經(jīng)支持插件功能。而從 1.3 版本開始,Taro 支持直接開發(fā)微信與支付寶小程序插件,這意味著 Taro 項目將和小程序插件無縫對接,不再有開發(fā)模式切換的成本。
「小程序·云開發(fā)」是微信小程序聯(lián)合騰訊云團隊提供的一個非常強大的功能,它是一款 Serverless 服務(wù),為開發(fā)者提供了「云函數(shù)」、「云數(shù)據(jù)庫」和「云文件存儲」三大能力,并且將這些能力封裝成特定的接口,可以幫助開發(fā)者快速構(gòu)建微信小程序的后端服務(wù)。為了讓 Taro 開發(fā)者能夠享受到「小程序·云開發(fā)」的能力,Taro 也加入了對「小程序·云開發(fā)」的支持,為「小程序·云開發(fā)」提供了初始化模板,并且將小程序云相關(guān)的 API 進行了封裝,方便開發(fā)者進行使用。同時,「小程序·云開發(fā)」已提供 H5 版本的 SDK,Taro 支持將小程序、H5 的調(diào)用方式進行統(tǒng)一封裝,幫助開發(fā)者快速打造 Serverless 的多端應(yīng)用。
正如前面所提到,Taro 1.3 是一個醞釀時間最久,擁有特性最多的大版本,對 Taro 底層也進行了不小的重構(gòu),所以,1.3 版本的升級帶了以下 2 個兼容性問題。
在之前的 Taro 版本中,JSX 中綁定的事件監(jiān)聽函數(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 (
)
}
}
上述例子中, 按鈕綁定的點擊事件,在之前版本中是能夠正常執(zhí)行的,Taro 會默認將
clickHandler
的作用域綁定為當前組件實例,但是這并不符合 React 中的實際情況,所以,在 1.3 版本中,我們對這一問題進行了修復(fù),現(xiàn)在 JSX 中的事件監(jiān)聽函數(shù)必須綁定作用域,否則就會報錯。
上述代碼中 JSX 部分可以修改為如下
render () {
return (
)
}
或者你也可以在 constructor
中將函數(shù)進行提前綁定作用域,
constructor () {
this.clickHandlerBind = this.clickHandler.bind(this)
}
render () {
return (
)
}
還有一種做法是,將 clickHandler
寫成箭頭函數(shù),這種方式在新舊版本中均可以正常運行。
在之前版本中,使用 Taro 編譯后的組件是可以直接用在原生項目中的,以提升復(fù)用性,但 1.3 版本由于組件的 props 系統(tǒng)徹底重構(gòu)了,升級 1.3 后暫時無法在原生項目中使用 Taro 組件,我們正在積極處理這個問題,在后續(xù)版本中將繼續(xù)支持這一特性。
感謝各位的閱讀,以上就是“JSX中的事件監(jiān)聽函數(shù)怎么綁定作用域”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對JSX中的事件監(jiān)聽函數(shù)怎么綁定作用域這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!