簡介
各個平臺的小程序 如雨後春筍，瘋狂的折磨前端，最近做百度小程序,出於複用性考慮最終選擇的Taro ，官方是這麼騙你入坑的：
使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動小程序、H5、React-Native 等）運行的代碼是引用
是不是立馬就覺得是神器，相信你就太天真了，由於是用Taro 主要是做 小程序開發，沒使用H5 ,react-native 的模式，出於寫過react-native 的角度，也不推薦使用。
百度小程序
官方是這樣描述的：
Taro 遵循 React 語法規範，它採用與 React 一致的組件化思想，組件生命週期與 React
保持一致，同時支持使用 JSX 語法裏是引用
在小程序中實際的生命週期有一定的區別，對JSX 的支持也是有限的
1.生命週期
因爲小程序的特點，生命週期是與react 不一致的
對應生命週期
| 小程序 | Taro |
|---|---|
| onLaunch | componentWillMount |
| onLoad | componentWillMount |
| onReady | componentDidMount |
| onUnload | componentWillUnmount |
| onError | componentDidCatchError |
| onShow | componentDidShow |
| onHide | componentDidHide |
在自組件中 componentWillUnmount 存在和預期不一致，在 page 直接關閉 或跳轉時 不執行自組件的componentWillUnmount；解決思路 有兩種：
1. 將 自組件需要執行的放在 父級執行；
2.延遲 關閉跳轉，先Unmount 組件；
2.JSX 語法支持
-
不支持在 render() 之外的方法中定義 JSX
在render 外的JSX 編譯會報錯 `` -
不能在包含 JSX 元素的 map 循環中使用 if 表達式(建議使用 filter 過濾或 三元操作)
render{
const arr = [1,2,3,4,5,6,7,8]
return (
<View className="wrap">
{
arr.map(item => {
if(item >5){
reurn (<View>{item}</View>)
}
})
}
</View>
)
}
- 不支持無狀態組件
//不能使用這種模式 只能是規範的組件方式
const myView = function (){
return <View>123</View>
}
2.組件通信
- props 更新存在不一致的情況
建議在 更新不一致時 重新 渲染 一個新的組件 - list 更新時， map 的遍歷外層更新 但是內部引用組件不更新、
這個應該是轉爲小程序的缺陷 ，建議list 覆蓋時 建議 先將原list 賦值爲空 （會有閃屏現象）
3.踩坑記錄
1.自定義蒙層顯示異常
在用view構造的自定義蒙層會有各種各樣的異常
- button 點擊異常（微信）
- Textarea 在自定義蒙層下顯示異常（百度）
解決思路：
使用cover-view 替換處理 butoon 使用 view 組件替換