Jotai

安装

npm install jotai
# 如果使用yarn
# yarn add jotai

使用

创建一个原子

import { atom } from 'jotai';

export const countAtom = atom(0);
export const textAtom = atom('Hello Jotai');

在Hook内使用

Note

不可以在Hook外使用

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './store';

export function Counter() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>加 1</button>
      <button onClick={() => setCount(0)}>重置</button>
    </div>
  );
}

在Hook外使用

Note

可以在Hook内使用，前提是这个变量必须使用useAtom或者useAtomValue定义

import { getDefaultStore } from 'jotai';
import { countAtom } from './store';

const store = getDefaultStore();

export function logCount() {
  const count = store.get(countAtom);
  console.log(count);
}

export function setCount(count: number) {
  store.set(countAtom, count);
}

自定义Hook