小程序 + Taro 的一些坑整理（Wepy 已棄坑）

Taro

Taro是啥我就不介紹了，基於react，多端渲染框架。

我的感受其實這個框架仍然主要用在小程序上面，由於API對小程序的支持力度是最大的。 基於react，支持redux狀態管理，徹底的組件化實現，用起來我以爲OK。

ps：在這裏要吐槽一下wepy，wepy也是一個小程序的框架，
	這個框架最開始我以爲既然是基於vue，那用起來應該都還OK，
	事實是，wepy並不是真正的vue，
	有點像是一個閹割、魔改以後的東西，
	缺乏徹底的組件化支持、缺乏狀態管理、父子組件通訊所有用event bus實現
	最終寫出來的代碼可維護性並不強，因此最後，割肉放棄，恰好年前事兒很少，重構，換了Taro。

第一個坑：@connect

這個其實不是Taro自己的坑，而是react踩到的坑。

Taro給出的例子是這樣的，
設爲【寫法1】：
	import { add, minus, asyncAdd } from '../../actions/counter'
    @connect(({ counter }) => ({
        counter
    }), (dispatch) => ({
        add () {
            dispatch(add())
        },
        dec () {
            dispatch(minus())
        },
        asyncAdd () {
            dispatch(asyncAdd())
        }
    }))

@connect是 connect(mapState,mapActions)(ComponentName)的語法糖，
而mapActions，這裏採用了枚舉的方式去映射actions
其實能夠藉助redux提供的bindActionCreators方法，批量映射actions，
設爲【寫法2】，like this：

import { bindActionCreators } from "redux";
import * as COUNTER from '../../actions/counter'
@connect(({ counter }) => ({
  counter
}), (dispatch)=>{
  return {
    actions:bindActionCreators({
      ...COUNTER
    },dispatch)
  }
})

在 componentWillMount 的生命週期裏，
this.props裏面會有一個actions對象，裏面放了add, minus, asyncAdd三個方法，
接着，咱們給某個元素綁定onClick事件，在onClick事件中，console.log(this.props),

會發現！！！
actions不見了！裏面的add, minus, asyncAdd三個方法不見了！actions值爲null！

最後直接說結論吧，這個涉及到bindActionCreators的原理。

好比這裏 import * as COUNTER from '../../actions/counter'
COUNTER是一個對象，裏面有三個函數：{ add, minus, asyncAdd }

(dispatch)=>{
  return {
    actions:bindActionCreators({
      ...COUNTER
    },dispatch)
  }
}
這一段的結果就是返回了一個對象： { actions:{ add () {dispatch(add()), ... } } }
而且在 componentWillMount 裏面的this.props中，
add，minus，asyncAdd都是在actions這個對象裏面，這顯然與【寫法1】的結果不同啊
bindActionCreators函數調用自己返回的是一個對象，裏面包含了那些actions

正確的寫法：
(dispatch) => ({
   ...bindActionCreators({
     ...LIST_ACTIONS
   },dispatch)
})

這個寫法的效果等同於【寫法1】

第二個坑：條件渲染

vue的條件渲染寫法是這樣的：
	<div v-if="isShow"></div>

react的條件渲染是這樣的：
	{ this.state.isShow && <div v-if="isShow"></div> }

有一些極端的狀況，多條件語句，前置條件應用括號括起來

錯誤的示例：
	{ this.state.isShow || this.state.isLicence && <div v-if="isShow"></div> }

正確的示例：
	{ (this.state.isShow || this.state.isLicence) && <div v-if="isShow"></div> }

固然，react還能夠在render函數的return以前，使用if語句自定義一個jsx變量的賦值，
來決定渲染哪一塊的內容，總的來看，仍是直接寫jsx裏面舒服些。

第三個坑：微信小程序富文本渲染

在微信小程序下會用到wxParse這個東西來達到html轉換wxml的效果，
可是這是在Taro下，官方給出了一個混寫的示例。
在這裏，封裝一個組件，命名爲WxParseComponent.js

WxParseComponent.js
	import Taro, { Component } from '@tarojs/taro'
	import { View } from '@tarojs/components'
	import WxParse from '../../assets/js/wxParse/wxParse'
	import '../../assets/css/wxParse.less'
	export default class ParseComponent extends Component {
	    componentDidMount () { }
	    defaultProps = {
	        mark:""
	    }
	    render () {
	    	//在這裏進行轉化
	        if(this.props.mark){
	            let domText = this.props.mark;
	            WxParse.wxParse('domText', 'html', domText, this.$scope, 5);
	        }
	        return (
	            <View>
	                    {	
	                    	/* 在此處進行判斷環境，決定是否渲染wxParse的內容 */
	                        process.env.TARO_ENV === 'weapp' ? 
	                        <View>
	                            <import src='../../assets/js/wxParse/wxParse.wxml' />
	                            <template is='wxParse' data='{{wxParseData:domText.nodes}}'/>
	                        </View> : <View>只在小程序裏支持</View>
	                    }
	            </View>
	        )
	    }
	}

	外部引用：
		<ParseComponent mark={this.state.remark}></ParseComponent>
		其中，this.state.remark爲帶html標籤的富文本字符串

第四個坑：數據更新，視圖沒有更新

vue裏面有這個問題，主要緣由是給對象賦予了新的屬性後出現，新的屬性不具有響應式的特徵。

react的主要是出如今redux狀態管理中，在更新state的reducer操做中，對state的操做具備了反作用，將會致使數據更新，而視圖沒有更新。