Jotai进阶指导：解锁沉浸式React状态管理体验

2023-02-13 07:06:54

Jotai进阶指南：释放React状态管理的强大功能

状态原子：应用程序状态的基本构建块

Jotai的核心是状态原子 ，它们是应用程序中不可变的最小状态单元。想象一下乐高积木，每个积木代表应用程序状态的一个独立部分。你可以使用atom()函数创建状态原子，并通过useAtom()钩子访问和修改它们。

const countAtom = atom(0);

// Counter组件使用useAtom()访问countAtom状态原子
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  // ...
}

状态选择器：从多个状态原子派生新状态

状态选择器 让你可以从多个状态原子中派生出新的状态。它们就像数学函数，接受现有的状态原子作为输入，并返回一个派生状态。你可以使用selector()函数创建状态选择器，并通过useSelector()钩子访问它们。

const totalAtom = selector((get) => {
  const count1 = get(countAtom1);
  const count2 = get(countAtom2);
  return count1 + count2;
});

// Total组件使用useSelector()访问totalAtom状态选择器
function Total() {
  const total = useSelector(totalAtom);
  // ...
}

订阅状态：监听状态的变化

订阅状态 允许你监听状态原子的变化。就像注册接收新闻时事通讯一样，你可以使用useAtomValue()钩子订阅状态。它会返回一个可观察对象，你可以使用它监听状态的变化。

// 订阅countAtom状态原子
const count = useAtomValue(countAtom);

useEffect(() => {
  count.subscribe((newValue) => {
    console.log(`Count changed to ${newValue}`);
  });
}, []);

更新状态：修改状态原子的值

更新状态 是指修改状态原子的值。就像用记号笔更改白板上的文字一样，你可以使用useSetAtom()钩子更新状态。它会返回一个函数，你可以使用它来修改状态原子的值。

const setCount = useSetAtom(countAtom);

// Counter组件使用useSetAtom()更新countAtom状态原子
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  // ...
  return (
    <button onClick={() => setCount(count + 1)}>+</button>
  );
}