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)
