我可以使用 React Hooks / Redux / Dva / 其他 React 特性 嗎？

如果開發(fā)者使用 Remax 官方模板開始開發(fā)，應(yīng)該會注意到以下代碼：

Remax 本身沒有提供類 React DSL 或者自己去實現(xiàn) React。 開發(fā)者應(yīng)該意識到你使用的就是 React 官方庫，你可以自己選擇 React 版本，選擇 React 相關(guān)的 store 方案，表單管理方案等等。而像 React Hooks 等特性自然都可以正常使用。

我可以使用 Ant Design / Ant Design Mobile / 其他 React DOM 依賴類庫嗎？

小程序平臺不是 Web 環(huán)境，Remax 對標(biāo)的就是 React DOM / React Native。正如 web 平臺的類庫不能在 react native 中使用一樣，小程序中也應(yīng)該使用小程序的類庫。目前 React 在 小程序的生態(tài)圈還不夠完善，這也給了開發(fā)者們很大的空間去發(fā)揮。

既然 web 的現(xiàn)成方案不能直接使用，我應(yīng)該怎么快速開發(fā) UI 組件？

Remax 支持直接使用原生組件庫。具體請參考 指南 - 小程序自定義組件。目前得知社區(qū)中已有開發(fā)者在開發(fā) React 小程序組件庫，值得期待。

Remax 支持跨平臺開發(fā)嗎？

支持，具體可參考 跨平臺開發(fā)。

Remax 的性能有問題嗎？

性能問題在出現(xiàn)之前，都不是問題。這是我們想先告訴開發(fā)者的一個概念，提前考慮性能問題是缺少實際場景的考慮。

由于 Remax 的實現(xiàn)在運行時中做了很多事情，對于開發(fā)者來說有一種黑盒的既視感，開發(fā)者會 預(yù)設(shè) Remax 在處理很復(fù)雜的邏輯，性能 "一定" 也會受影響。關(guān)于這點我們會從三個方面來看：

1. 小程序框架本身的限制

小程序本身的文檔會有明確的關(guān)于性能的說明，其中最重要的兩項是

• 不要頻繁的 setData。
• 頁面節(jié)點不要大于 xxx 個。

1. React 本身虛擬 DOM 渲染機制在小程序中的限制

React 的虛擬 DOM 機制在 Remax 中存在于邏輯層，小程序框架本身是不會理會 React 的虛擬 DOM 的。因此如果開發(fā)者本身沒有處理好 React Pure Render 這個事情，性能問題會在小程序中被放大。

1. Remax 本身的優(yōu)化

把 React 跑在小程序的邏輯層之上，是無可避免會增長開銷的，而渲染層的動態(tài)模板邏輯相對靜態(tài)模板也會有一定損耗。但是 Remax 會對 setData 的傳輸量做壓縮和精簡，保證每次更新只會修改變化的部分。

綜合上述來看，我們總結(jié)了一下目前開發(fā)者遇到的性能問題的幾個 case：

• 沒有做好 pure render （一般與使用了 Redux 等全局 Store 類似的邏輯有關(guān)）。
• 頻繁 setState（這與原生小程序中頻繁 setData 的行為類似）。
• 長列表頁面（與原生小程序中的頁面節(jié)點限制相關(guān)，在 Remax 中會被放大）。
• 其中長列表頁面，個人的經(jīng)驗是，以一屏顯示 6 個 item 為例，一般在翻頁到 15 頁以后會出現(xiàn)可感知的卡頓。如果有優(yōu)化的需要，可以做虛擬滾動優(yōu)化，如 https://github.com/remaxjs/remax-window。

使用高階組件導(dǎo)致頁面的生命周期未調(diào)用

如果使用了 Redux 的 connect ，請將 connect 的 option.forwardRef 設(shè)置為 true文檔。其它第三方庫的高階組件的處理方式也類似。原因如下。

對于使用 class 組件的頁面，Remax 會通過 ref 獲取頁面生命周期。當(dāng)頁面組件被高階組件（有時被稱為 HOC）包裹時，通過 ref 取得的是 HOC 最外層的容器組件，而不是被包裹的組件 。我們需要 React.forwardRef 將 ref 轉(zhuǎn)發(fā)到內(nèi)部組件。

import React, { forwardRef } from 'react';
import { View } from 'remax/alipay';
class IndexPage extends React.Component {
  onReady() {
    console.log('onReady被調(diào)用');
  }
  render() {
    return <View>這是一個例子</View>;
  }
}
// HOC 的容器是一個函數(shù)式組件
const HOC = Component => {
  const Wrapped = (props, ref) => {
    // 一些高階組件的邏輯
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};
// 另一種情況，HOC 容器是一個 class component
const ClazzHOC = Component => {
  class Wrapped extends React.Component {
    // 另一些高階組件的邏輯
    render() {
      const { forwardRef, ...rest } = this.props;
      return <Component {...rest} ref={forwardRef} />;
    }
  }
  // 比起第一種情況，這里的處理要稍微麻煩一些
  return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};
// 下面這三種方式導(dǎo)出的頁面都是可以按照預(yù)期調(diào)用 `onReady`
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

編譯后小程序提示找不到 xxx 文件路徑

1. 嘗試刪除打包目錄，重新 build
2. 真機中出現(xiàn)此問題，查看編譯選項是否開啟了代碼保護(hù)，目前開發(fā)模式開啟代碼保護(hù)有出錯可能。

微信嵌套層級

Remax 默認(rèn)為微信的每個 host 組件定義了嵌套層數(shù)。其中 View 20 層，其他組件都在 1 ~ 5 層。如果出現(xiàn)形如下圖的情況，可以通過配置修改嵌套層數(shù)。

// remax.config.js
{
  UNSAFE_wechatTemplateDepth: {
    button: 2, // 把 button 的嵌套層數(shù)修改為 2 層
  }
}