深度浅析 Recoil 如何让多个组件共享并订阅状态

前端

2023-09-21 20:23:33

Recoil：下一代 React 状态管理库

原子化和分散式的状态管理

Recoil 是 React 生态系统中一款新兴的状态管理库，以其原子化 和分散式 的状态管理方法脱颖而出。原子化状态将状态分解成独立的单元，而分散式状态管理允许将状态分散存储在不同的组件中。这种设计带来了以下好处：

提高可维护性： 更容易追踪和预测状态变化，简化调试和维护。
降低组件耦合： 组件仅访问和修改自己所需的状态，减少依赖性和提高可重用性。
增强稳定性： 避免全局状态污染，提高应用程序的鲁棒性。

Hooks 式 API：便捷且直观

Recoil 采用基于 Hooks 的 API，与 React 16.8 中引入的 Hooks 特性相得益彰。有两个核心 Hooks：

useRecoilState： 用于设置和访问原子状态。
useRecoilValue： 用于读取原子状态的值。

订阅和选择器：实现状态共享

Recoil 通过订阅器 机制实现状态订阅。订阅器是一种轻量级对象，允许组件订阅和取消订阅状态。当订阅的状态发生变化时，订阅器会通知订阅它的组件。

选择器 是一种函数，它从多个原子状态中提取数据并计算派生状态。选择器可以通过 useRecoilValue Hook 获取其值。当引用的原子状态发生变化时，选择器会自动重新计算其值，并通知所有订阅它的组件。这使得多个组件可以共享和订阅同一个派生状态。

示例：计数器的实现

考虑两个组件 Com1 和 Com2，它们都需要访问共享的状态 count。

在 Com1 中创建原子状态：

const countAtom = atom({
  key: "count",
  default: 0,
});

在 Com1 和 Com2 中使用 useRecoilState 访问和修改 count 状态：

function Com1() {
  const [count, setCount] = useRecoilState(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

function Com2() {
  const [count] = useRecoilState(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}