React状态管理库

February 17, 2024

在本文中，React 状态管理指的是管理 React 组件外部的状态。

“状态”往往就是外部的数据源，状态管理库管理的数据源主要是（手动创建的）普通的 JavaScript 值（例如 WebSocket 就不包含了）。
状态管理库要做的就是当数据源变更时，触发组件重渲染，以达到同步内外数据的状态。

状态管理库的原理，简单来说就是：要触发重渲染，调用 setState 函数；要同步外部数据，调用 useEffect 函数。（另见：Why React Re-Renders）

现代库往往会顾虑到 SSR 的情况，使用 useSyncExternalStore 订阅数据源是一个很好的选择。

~~TODO: 一些状态管理库，例如 React Redux 会用到 Provider。~~

以下状态管理库不依赖 Context

	可变性	原子性
zustand	❎	❎
jotai	❎	✅
valtio	✅	❎

下面简单介绍一下它们的核心 API
以下 TS 类型为了演示方便，可能是修改和简化过的

zustand

import React from "react";
import { create } from "zustand";

interface BearState {
    bears: number;
    increase: (by: number) => void;
}

const useBearStore: UseBoundStore<BearState> = create<BearState>()(
    (
        setState: StoreApi<BearState>["setState"],
        getState: StoreApi<BearState>["getState"],
        storeApi: StoreApi<BearState>,
    ) => ({
        bears: 0,
        increase: (by) => setState((state) => ({ bears: state.bears + by })),
        removeAll: () => setState({ bears: 0 }),
    }),
);

function BearCounter() {
    const bears = useBearStore((state) => state.bears);
    return React.createElement("h1", {}, `${bears} around here ...`);
}

function Controls() {
    const increasePopulation = useBearStore((state) => state.increase);
    return React.createElement("button", { onClick: increasePopulation }, "one up");
}

// 类型

type UseBoundStore<T> = StoreApi<T> & {
    (): T;
    <U>(selector: (state: T) => U): U;
};

interface StoreApi<T> {
    setState: (partial: MaybePartial<T> | ((state: T) => MaybePartial<T>), replace?: boolean | undefined) => void;
    getState: () => T;
    getInitialState: () => T;
    subscribe: (listener: (state: T, prevState: T) => void) => VoidFunction;
}

type MaybePartial<T> = T | Partial<T>;

另见：https://docs-zustand.surge.sh/modules.html

jotai

// primitive atom
function atom<Value>(initialValue: Value): PrimitiveAtom<Value> & WithInitialValue<Value>;

// read-only derived atom
function atom<Value>(read: Read<Value>): Atom<Value>;

// write-only derived atom
function atom<Value, Args extends unknown[], Result>(
    initialValue: Value, // it's a convention to pass `null` for the first argument
    write: Write<Args, Result>,
): WritableAtom<Value, Args, Result> & WithInitialValue<Value>;

// writable derived atom
function atom<Value, Args extends unknown[], Result>(
    read: Read<Value>,
    write: Write<Args, Result>,
): WritableAtom<Value, Args, Result>;

// functions（简化）
type Read<Value> = (get: Getter) => Value;

type Write<Args extends unknown[], Result> = (get: Getter, set: Setter, ...args: Args) => Result;

type Getter = <Value>(atom: Value) => Value;

type Setter = <Value, Args extends unknown[], Result>(atom: Value, ...args: Args) => Result;

// primitive or writable derived atom
function useAtom<Value, Args extends unknown[], Result>(
    atom: WritableAtom<Value, Args, Result>,
    options?: { store?: Store },
): [Value, SetAtom<Args, Result>];

// read-only atom
function useAtom<Value>(atom: Atom<Value>, options?: { store?: Store }): [Value, never];

type SetAtom<Args extends unknown[], Result> = <A extends Args>(...args: A) => Result;

另见：https://docs-jotai.surge.sh/modules.html

valtio

valtio 基于 Proxy，很容易让人联想到 @vue/reactivity API
实际上是有很多区别的，只是心智模型类似

注意：因为基于 Proxy，因此只能监听对象

tsx

import { proxy, useSnapshot } from "valtio";

const state = proxy({ count: 0, meta: { text: "hello" } });

// mutate from anywhere
setInterval(() => {
    ++state.count;
}, 1000);

function Counter() {
    const snap = useSnapshot(state);
    const meta = useSnapshot(state.meta);
    return (
        <div>
            <span>{meta.text}</span>
            <span>{snap.count}</span>
            <button
                onClick={() => {
                    // also read from the state proxy in callbacks
                    if (state.count < 10) ++state.count;
                }}
            >
                +1
            </button>
        </div>
    );
}

// 类型

function proxy<T extends object>(initialObject?: T): T;
function useSnapshot<T extends object>(
    proxyObject: T,
    options?: {
        sync?: boolean;
    },
): DeepReadonly<T>;

另见：https://docs-valtio.surge.sh/modules.html

←Back to home