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

与 web 开发 的区别

1. 尽可能避免使用组合选择器

• 缘由:

1. 组合选择器在 react-native 中是不受支持
2. 组合选择器在 各小程序 中支持程度不一, 且在使用插槽的状况下无效(微信小程序的组件使用插槽机制,可是组件不在命名插槽以内)

• 特殊状况须要使用组合选择器的:

1. 须要对 TaroUI 进行样式覆盖的。 若是是在全部地方样式一致,就可使用全局样式覆盖的方式；可是若是某组件在不一样位置具备不一样的样式, 这时候就不得不借用组合选择器(有更好方案的能够联系我补充)。

2. 条件编译

• 按文件名进行条件编译

假设目录中存在这些文件

-- .
|- Picker.tsx
|- Picker.alipay.tsx
|- Picker.h5.tsx
复制代码

则在引入 Picker 组件时，

import Picker from './Picker';
复制代码

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

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

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

• 按指令进行条件编译

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

1. 指定平台保留

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

例如

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

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

2. 指定平台剔除

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

例如

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

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

注意 ifdef 和 ifndef 区别。

3. 样式限制

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

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

4. 其它限制

• 不能使用 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>
复制代码

• router state 的限制。taro 只支持经过 url search 的方式附加参数，不支持 router state。

• setState 必定是异步的。官方说明

• 事件绑定传参。与 react 不一样的是，这里使用 bind 比 箭头函数 性能好。官方文档

• this.props.children 没法操做，没法解构。任何对this.props.children 的操做都是非法的。看文档

• ref 限制。使用 ref 拿到的感受并非组件实例，而是一堆属性的组合。使用 ref 应当谨慎。

5. 我的以为很差的点

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