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，但官方沒有時間處理。