taro.js & dva 腳手架搭建及常見問題

## taro.js & dva 腳手架

### 啓動

npm install -g @tarojs/cli // 全局安裝taro-cli

npm i

npm run dev:weapp // 啓動

### [重要！關於taro開發的一些注意事項](https://nervjs.github.io/taro/docs/best-practice.html)

- 不能在包含 JSX 元素的 map 循環中使用 if 表達式

- 不能使用 Array#map 以外的方法操做 JSX 數組

- 不能在 JSX 參數中使用匿名函數

- 暫不支持在 render() 以外的方法定義 JSX

- 不能在 JSX 參數中使用對象展開符

- 不支持無狀態組件

- 組件上綁定方法只支持this.xxx方式

> handleClick = () => {} <Cat onClick={this.handleClick} />

- 父組件要往子組件傳遞函數，屬性名必須以 on 開頭

- 不要在組件中打印this.props.children和傳入的函數

- 不要在 state 與 props 上用同名的字段，由於這些被字段在微信小程序中都會掛在 data 上。

- 能夠使用 this.$preload 函數進行頁面跳轉傳參[文檔連接](https://nervjs.github.io/taro/docs/best-practice.html#%E5%9C%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD-%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8-this-preload-%E5%87%BD%E6%95%B0%E8%BF%9B%E8%A1%8C%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E4%BC%A0%E5%8F%82)

 

- render中的jsx，不支持先聲明變量，再賦值，如：

 

const renderA = <View>1</View>

const renderB = <View>2</View>

const renderC = <View>3</View>

let content

if (current === 0) content = renderA

else if (current === 1) content = renderB

else if (current === 2) content = renderC

- render中的jsx，不支持函數組件，如:

 

const renderContent = () => {

return (

<View>1</View>

)

}

return (

<View className='index'>

<View className='filter-content'>

{renderContent()}

</View>

</View>

)

 

> 該特性taro v1.3有計劃支持，[issues1869](https://github.com/NervJS/taro/issues/1869#issuecomment-452614768)[issues157](https://github.com/NervJS/taro/issues/157)

 

- render中的jsx，不支持數組或對象形式寫jsx，如：

 

const renderA = [

<View>1</View>,

<View>2</View>,

<View>3</View>,

]

const renderB = {

'a': <View>1</View>,

'b': <View>2</View>,

'c': <View>3</View>,

}

const i = 0 // 1 or 2

const j = 'a' // 'b' or 'c'

return (

<View>renderA[i]</View>

<View>renderB[j]</View>

)

 

- 高階組件支持有限，沒法劫持render方法，但能夠劫持其餘週期，如componentWillMount。

> 使用可參考taro-redux實現[taro-redux](https://github.com/NervJS/taro/tree/master/packages/taro-redux)

 

> [issues1155](https://github.com/NervJS/taro/issues/1155)

[issues465](https://github.com/NervJS/taro/issues/465)

 

### 可參考項目：

- [仿知乎](https://github.com/zuoge85/taro-dva)

- [awesome-taro](https://github.com/NervJS/awesome-taro)

### 其餘技術棧學習

- [dva](https://github.com/dvajs/dva)

- [tarojs](https://github.com/NervJS/taro)

- [Typescript](https://www.tslang.cn/docs/home.html)

- [關於effects的文檔](https://redux-saga-in-chinese.js.org/docs/basics/DeclarativeEffects.html)

- call : 調用異步函數，一般用於請求接口

- put : 用於dispatch actions

- select: 訪問其餘model, 獲取state

- [關於整個model的文檔](https://dvajs.com/api/#namespace)

- [taro組件庫](https://taro-ui.aotu.io/#/docs/quickstart)

- [classnames](https://github.com/JedWatson/classnames)

 

原文出處：https://www.cnblogs.com/wanDPS/p/10470426.html