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)