安裝

NPM

Recoil 套件位於 npm。若要安裝最新穩定版本，請執行下列指令

npm install recoil

或者，如果您使用 yarn

yarn add recoil

或者，如果您使用 bower

bower install --save recoil

Bundler

透過 NPM 安裝的 Recoil 與模組打包器相符，例如 Webpack 或 Rollup。

ES5 支援

Recoil 組建並未轉譯為 ES5，我們不支援使用 Recoil 和 ES5。如果您需要支援未提供 ES6 原生功能的瀏覽器，您可以使用 Babel 編譯您的程式碼並使用預設 @babel/preset-env。但是，我們不支援此用法，且您可能會遇到問題。特別是，就像 React 一樣，Recoil 取決於 Map 和 Set 型別及 ES6 的其他功能。使用多重載入模擬這些功能可能會導致效能不佳。

CDN

自 0.0.11 版開始，Recoil 提供 UMD 建置，可直接用於 <script> 標籤，並在全域命名空間中公開 Recoil 符號。建議連結至特定版本號碼並建置，以避免較新版本意外損毀

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/recoil.production.js"></script>

可瀏覽 CDN 上所有 Recoil 檔案，網址為 jsdelivr。

ESLint

若專案中使用 eslint-plugin-react-hooks。例如，使用類似的 eslint 設定

// previous .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

建議將 'useRecoilCallback' 新增至 additionalHooks 清單。進行此變更後，當傳遞給 useRecoilCallback() 的依賴項錯誤時，ESLint 會發出警告並建議修正方式。additionalHooks 的格式為正則表達式字串。

// modified .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn", {
        "additionalHooks": "(useRecoilCallback|useRecoilTransaction_UNSTABLE)"
      }
    ]
  }
}

每日建置

我們每天會依據目前的 main 分支建置套件，並將其發布為 GitHub 上的 nightly 分支。可透過 npm

npm install https://github.com/facebookexperimental/Recoil.git#nightly

或 yarn

yarn add https://github.com/facebookexperimental/Recoil.git#nightly

使用或在 package.json 中新增依賴項，並執行 npm install 或 yarn

  "recoil": "facebookexperimental/Recoil.git#nightly",