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

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

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

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

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

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

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

Remax 支持跨平臺(tái)開(kāi)發(fā)嗎？

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

Remax 的性能有問(wèn)題嗎？

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

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

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

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

• 不要頻繁的 setData。
• 頁(yè)面節(jié)點(diǎn)不要大于 xxx 個(gè)。

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

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

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

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

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

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

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

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

對(duì)于使用 class 組件的頁(yè)面，Remax 會(huì)通過(guò) ref 獲取頁(yè)面生命周期。當(dāng)頁(yè)面組件被高階組件（有時(shí)被稱為 HOC）包裹時(shí)，通過(guò) 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>這是一個(gè)例子</View>;
  }
}
// HOC 的容器是一個(gè)函數(shù)式組件
const HOC = Component => {
  const Wrapped = (props, ref) => {
    // 一些高階組件的邏輯
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};
// 另一種情況，HOC 容器是一個(gè) 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è)面都是可以按照預(yù)期調(diào)用 `onReady`
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

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

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

微信嵌套層級(jí)

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

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