React Native 優化日記(1) - 集中管理常數和修改 import 路徑別名

最近在優化一個即將結束的案子，未來其他案子可能也會需要使用相同的方式進行優化所以寫了這篇文章記錄一下優化的過程。這篇文章中的內容是我優化的第一步，之後有時間會將後續的優化也分享出來。

Constants

⚡目標：將各個組件中不需要改變的狀態(state)分離出來集中管理。

⚡優點：

減少組件中的程式碼長度，若程式碼太長會需要一直上下翻，很不方便。
可避免一樣的狀態在不同組件中重複聲明。
當有需要修正時，只需要修改一處，不需要手動修改每個組件中的狀態。

簡單舉例

我的習慣是在 src 底下新建一個 constants 資料夾和 index.js：

.constants
├── index.js

接著就是將專案中所有固定不變的常數放到 index.js 中，簡單舉幾個例子：

// All
export const DEV_API = process.env.REACT_APP_DEV_API;
export const IMG_WIDTH = 250;
export const DAY_FORMAT = "YYYY-MM-DD";
export const DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";

// Work
export const WORK_STATUS = [
  { color: "#13A0EF", key: "ready" },
  { color: "#FFA500", key: "delay" },
  { color: "#006DAA", key: "start" },
  { color: "#0EAD1E", key: "finish" },
  { color: "#FF0000", key: "stop" },
];

如果有些變數的文字需要根據語系動態切換，建議是只保留 key 在 constants file 裡面，使用到該常數的組件中再加上 I18n 翻譯：

// constants/index.js
export const WORK_STATUS = [
  { color: "#13A0EF", key: "ready" },
  { color: "#FFA500", key: "delay" },
  { color: "#006DAA", key: "start" },
  { color: "#0EAD1E", key: "finish" },
  { color: "#FF0000", key: "stop" },
];

// component.js
import { WORK_STATUS } from "./constants/index.js";

// ...

<div>
  {WORK_STATUS.map(({ key }) => <p>{I18n.t(key)}</p>}
</div>

Path alias

⚡目標：為常用路徑取個別名。

⚡優點：

簡化 import 處的程式碼，避免過多的 ../../ 或者 ../../../ , etc
比起 ../../，使用別名能更明確知道 import 的地方是哪裡。

簡單舉例

用個例子比較一下優化前後的效果，優化後的路徑顯然更易讀而且也更簡潔：

// before
import MachineDetail from "../../components/machine/Detail";
source={require("../../../assets/logo.png")}

// after
import MachineDetail from "@components/machine/Detail";
source={require("@assets/logo.png")}

優化方式

修改 src 底下的 babel.config.js，在裡面加上 module-resolver 這個模組解析插件，如果你的專案中並沒有安裝 babel-plugin-module-resolver 的話請記得先安裝：npm install --save-dev babel-plugin-module-resolver。

設定方式：plugins: ["module-resolver", { // options }]。
我的 root path 設置為 . 是因為我的 babel.config.js 放在 src 資料夾底下。

// babel.config.js
module.exports = function () {
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            // ...
            ["module-resolver", {
              root: ['.'],
              alias: {
                  "@components": "./components",
                  "@hooks": "./hooks",
                  "@routes": "./routes",
                  "@constants": "./constants",
                  "@assets": "./assets",
                  "@api": "./api",
                  "@styles": "./styles",
                  "@context": "./context",
                  // ...etc
              },
              extensions: ['.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.jsx', '.js', '.json']
            }]
        ]
    };
};

如此一來我們就能更方便的引入：

import { Row, Column } from "@components";
import { VERSION, LANGUAGE_LIST, DATE_FORMAT } from "@constants";
import { dbClean, dbInit, dbSelect, dbUpdate, dbDelete } from "@function";
import { request } from "@api";
import Context from "@context";
import { styles } from "@styles";

閱讀量: 6

Constants

簡單舉例

Path alias

簡單舉例

優化方式

相關文章: