跳至主要內容

Recoil 0.0.8

·閱讀時間 4 分鐘

今天，我們即將推出 Recoil 0.0.8。其中包含錯誤修正和新功能。非常感謝為此版本做出貢獻的每個人！看到這麼多人做出貢獻真是太棒了。

錯誤修正​

  • 修正了原子會儲存自我參照結構並造成無限循環的錯誤。（#153 中的 @n3tr）
  • 修正影響伺服器端渲染的錯誤。（#53 中的 @sbaudray）
  • 修正了建構系統和儲存庫同步問題。許多人都為此做出貢獻，特別是 @mondaychen 及包括 @claudiopro、@dustinsoftware、@jacques-blom、@jaredpalmer、@kentcdodds、@leushkin 和 @tony-go 在內的各位。讓 Jest 和 Flow 在內部和開放原始碼專案之間產生相同的行為仍有待努力。

功能​

TypeScript 支援​

現在可透過 DefinitelyTyped 儲存庫取得 TypeScript 定義。

atomFamily 及 selectorFamily​

這些公用程式可協助您建立相關原子或選擇器的集合，每個都針對某個參數的值產生。您可以使用 atomFamily 及 selectorFamily，而不用手動建立傳回原子或選擇器的 memoization 函式。未來，這些公用程式還有助於記憶體管理。

atomFamily 函數回傳從資料到原子的函數，會為輸入的每個資料值建立一個新的原子。例如，假設你想要儲存由某些 ID 識別的集合中每一個成員的座標組 {x: number, y: number}。如此一來，你可以撰寫

const coordinatesForID = atomFamily<{x: number, y: number}, ID>({
    key: 'coordinatesForID',
    default: {x: 0, y: 0},
});

接著以下列方式存取該狀態

function MyComponent({id}) {
    const [coordinates, setCoordinates] = useRecoilState(
        coordinatesForID(id)
    );
    ...
}

傳遞給 coordinatesForID 的每個 ID 都會取得它自己的獨立原子，其中包含座標。這些原子都有自己的訂閱，因此使用某個 ID 狀態的元件只會訂閱那個 ID 的變更。

類似地，selectorFamily 可讓你為每個資料值建立不同的選擇器。例如，假設你想要取每個座標並將它們旋轉 180 度

const rotatedCoordinatesForID = selectorFamily<{x: number, y: number}, ID>({
    key: 'rotatedCoordinatesForID',
    get: id => ({get}) => {
        const coordinates = get(coordinatesForID(id));
        return {
            x: -coordinates.x,
            y: -coordinates.y,
        };
    }
});

請注意，選擇器系列的 get 屬性是一個函數，它接收資料 (此例中為 ID)，並回傳一個函數，其函式簽章與單一選擇器的 get 屬性相同。一般而言，原子系列和選擇器系列的其他選項也是這樣運作的。

並行處理輔助函式​

我們已經引進選擇器系列，以便控制非同步選擇器的並行處理

  • waitForAll：平行要求所有相依性，並等候所有相依性都變得可用。
  • waitForAny：平行要求所有相依性，並等候其中任何一個相依性變得可用。
  • waitForNone：平行要求所有相依性，但不等候任何相依性。
  • noWait 要求單一相依性，但不等候它變得可用。

這些函式可用於平行擷取多個相依性，以及撰寫取決於上游相依性狀態的邏輯。例如，你可以撰寫一個選擇器，在非同步程序執行時有條件地提供預設值，而不是將該載入狀態傳播給元件。

constSelector 和 errorSelector​

這些選擇器系列分別僅回傳一個固定值或永遠擲出給定的錯誤。

readOnlySelector​

這僅將可讀寫的 RecoilState 包裝在只讀介面中。

接下來​

我們正在改善觀察和持久性 API，提升速度和記憶體管理，並提供並行模式的支援。非常感謝你嘗試使用 Recoil，我們希望你持續追蹤並看看它未來的發展！