Taro 小程序 使用

简介

各个平台的小程序 如雨后春笋，疯狂的折磨前端，最近做百度小程序,出于复用性考虑最终选择的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 语法支持

1. 不支持在 render() 之外的方法中定义 JSX

   在render 外的JSX 编译会报错
   ``
   
   

2. 不能在包含 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>
	)
}

3. 不支持无状态组件

//不能使用这种模式 只能是规范的组件方式
const myView = function (){
     return <View>123</View>
   } 

2.组件通信

1. props 更新存在不一致的情况
   建议在 更新不一致时 重新 渲染 一个新的组件
2. list 更新时， map 的遍历外层更新 但是内部引用组件不更新、
   这个应该是转为小程序的缺陷 ，建议list 覆盖时 建议 先将原list 赋值为空 （会有闪屏现象）

3.踩坑记录

1.自定义蒙层显示异常
在用view构造的自定义蒙层会有各种各样的异常
- button 点击异常（微信）
- Textarea 在自定义蒙层下显示异常（百度）
解决思路：
使用cover-view 替换处理 butoon 使用 view 组件替换