TaroJS 与 react 对比（有 react开发经验的可 10 分钟快速上手）

与 web 开发的区别

需要对 TaroUI 进行样式覆盖的。如果是在所有地方样式一致,就可以使用全局样式覆盖的方式；但是如果某组件在不同位置具有不同的样式, 这时候就不得不借用组合选择器(有更好方案的可以联系我补充)。

假设目录中存在这些文件

-- .
|- Picker.tsx
|- Picker.alipay.tsx
|- Picker.h5.tsx

则在引入 Picker 组件时，

import Picker from './Picker';

会自动引入特定平台的组件。

例如，在支付宝小程序编译时，会自动引用Picker.alipay.tsx 文件，在 h5 项目编译时使用 Picker.h5.tsx 文件，而在其他环境编译时，则会回退到Picker.tsx 文件。

样式文件同样适用于这条规则。

指令编译类似于 C 语言 里面条件编译的宏，用法也基本一致。

/* #ifdef %PLATFORM% */
.avatar {
  width: 100px;
  height: 100px;
}
/* #endif *

例如

/* #ifdef h5 alipay */
.avatar {
  width: 100px;
  height: 100px;
}
/* #endif *

以上代码只会在 h5 和支付宝小程序平台生效

/* #ifndef %PLATFORM% */
.avatar {
  width: 100px;
  height: 100px;
}
/* #endif *

例如

/* #ifndef rn alipay */
.avatar {
  width: 100px;
  height: 100px;
}
/* #endif *

以上代码不会在 react-native 和支付宝小程序平台生效。

注意 ifdef 和 ifndef 区别。

基本和 react-native 一致，原因是 react-native 布局引擎 yoga 的限制。

这里的原则是尽量以限制多的平台为准，实在差异较大的可以使用多平台多文件的方式。

不能使用 Array.prototype.map 之外的方法操作 JSX 数组

这里官方文档有说明，是因为在小程序内部使用 wx:for 循环，所以不能使用其他方法。官方限制如果真需要条件判断，需要先使用 Array.prototype.filter 筛选后在使用 map方法遍历。
props 声明。 在微信小程序端的自定义组件中，只有在 properties 中指定的属性，才能从父组件传入并接收。 由于使用和传递 props 的方法比较多样，包括直接使用，解构，解构赋值，跨层级传递等多种方法，建议组件设置 defaultProps，defaultProps 里面的属性都会设置到微信小程序的 properties 里面。
父组件传入 jsx 的限制。在 react 里面我们可以通过传入一个渲染函数或 JSXElement，而在 taro 里面我们只能传入 JSXElement(而且必须是单元素)。而且传入的属性名必须以 render 开头。例如,

<Modal
  renderHeader={<Header />}
  renderFooter={<Footer />}
>
  content
</Modal>

jsx 使用单引号，常规 react 项目中一般使用双引号声明 jsx 属性。官方文档也没有说明具体原因。 github 上有人专为此提了一条工单，Taro 项目 jsx 无法格式化为双引号问题 #1239。官方有回复，但不说明是什么原因，我感觉可能是个 bug，但官方没有时间处理。