大型列表和对象的处理

Jotai 在其jotai/utils库中提供了若干个用于快速定义 atom 的工具函数。这一节中奖拣选其中一些有助于处理大型列表和对象的工具进行一个简单的介绍。

splitAtom

splitAtom是一个用来处理列表的工具函数，它可以将一个内容为列表的 atom 中的每一个列表元素都定义为一个 atom。

以下示例展示了splitAtom的用法。

const TodosAtom = atom<Todo[]>([]);
const SplitTodosAtom = splitAtom(TodosAtom);

const Todo: FC<{ todo: WritableAtom<Todo> }> = ({ todo }) => {
  const [item, setItem] = useAtom(todo);

  // 对 item 进行操作
};

const TodoList = () => {
  const [todos] = useAtom(SplitTodosAtom);

  return (
    <div>
      {todos.map((todo) => {
        <Todo key={todo.id} todo={todo} />;
      })}
    </div>
  );
};

splitAtom可以在 React 组件中使用。

selectAtom

selectAtom可以用来从另一个 atom 中通过应用一个选择器函数来创建一个只读的派生 atom 的函数。因为选择器函数能够产生的结果是多种多样的，Jotai 不能保证写入方法能够逆向完成操作，所以通过selectAtom创建的 atom 都是只读 atom。

以下示例展示了selectAtom的用法。

const AllEmployeesAtom = atom<[{ department: string; employees: [] }]>([]);
const gavornEmployeesSelector = (at) =>
  at.find((e) => e.department === "Gavorn")?.employees ?? [];

const GavornEmployees = () => {
  const employeesAtom = selectAtom(AllEmployeesAtom, gavornEmployeesSelector);
  const [employees] = useAtom(employeesAtom);

  // 省略其他操作
};