React Context 完美替代品 Jotai

Jotai（Jotai 是 "Japanese word for "atom"" 的缩写）是一个用于 React 的状态管理库，它提供了一种不同的状态管理方法，通过原子（Atoms）的概念来管理状态。

原子是一个包含 read 和 write 函数的对象，可以包含一些状态。你可以在组件树中共享这些原子，而不需要使用上下文（Context）API。

以下是一个简单的例子，展示如何使用 Jotai 创建和使用一个原子：

首先，安装 Jotai：

npm install jotai

然后，你可以创建一个原子并在你的组件中使用它：

import React from 'react';
import { render } from 'react-dom';
import { atom, useAtom } from 'jotai';
 
// 创建一个原子，它持有一个数字状态
const countAtom = atom(0);
 
// 创建一个按钮组件，用于增加计数器的值
function CounterComponent() {
  const [count, setCount] = useAtom(countAtom);
 
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}
 
function App() {
  return (
    <div>
      <CounterComponent />
    </div>
  );
}
 
render(<App />, document.getElementById('root'));

在这个例子中，我们创建了一个名为 countAtom 的原子，它持有一个初始值为 0 的数字状态。然后我们定义了一个 CounterComponent 组件，它使用 useAtom 钩子来读取和更新 countAtom 的状态。这个组件包含一个按钮，点击按钮会增加计数器的值。

这个例子展示了如何使用 Jotai 来管理简单的状态。Jotai 还支持更复杂的状态管理模式，如响应式原子（Reactive Atoms）和使用原子的原子（Atoms of Atoms）。