Jotai 將 React 狀態管理推進到下一個層次

在 React 開發領域中，狀態管理是至關重要的，而各種庫都有助於實現這一目標。Jotai 就是這樣一個庫，它重新設計了狀態管理的概念，提供了一種簡化而有效的方法。

Jotai 簡介

Jotai 是一個針對 React 的極簡狀態管理庫，日語中的「狀態」一詞即為其名稱的來源。它提供了一種細粒度且直觀的狀態管理方法，使用原子 (atoms) 和選擇器 (selectors) 的概念來創建和操作狀態。

安裝 Jotai

在開始使用 Jotai 之前，首先需要安裝它。確保在開發環境中已安裝 Node.js 和 npm。如果尚未安裝，可以從官方網站 https://nodejs.org/ 下載 Node.js，該網站也包含 npm。

在終端中，切換到項目目錄並運行以下命令安裝 Jotai：

npm install jotai

或者，如果你更喜歡使用 Yarn，可以使用以下命令：

yarn add jotai

在你的 React 項目中使用 Jotai

安裝完成後，你可以導入 Jotai 的 atom 和 useAtom 函數，以開始在你的 React 項目中進行狀態管理。

定義原子

在 Jotai 中，原子代表了狀態的一部分。你可以使用 atom 函數創建原子，並將初始狀態作為參數傳遞給該函數。

import { atom } from 'jotai'

const countAtom = atom(0) // 創建一個初始狀態為 0 的原子

使用原子

在你的 React 組件中，使用 useAtom 鉤子來訪問和操作原子的狀態。useAtom 鉤子返回一個數組，其中第一個元素是當前狀態，第二個元素是一個設置函數，用於更新狀態。

import { useAtom } from 'jotai'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  )
}

在這個例子中，setCount 是一個函數，當調用它時會更新 countAtom 的狀態。

這是使用 Jotai 進行 React 應用程式狀態管理的基本用法。隨著你的探索，你會發現 Jotai 還提供了衍生原子、原子系列、異步原子等更強大的功能，這些功能有助於使狀態管理變得輕鬆自如。

對比：Jotai vs. Redux 和 Recoil

與 Redux 和 Recoil 等知名庫相比，Jotai 提供了一些顯著的優勢。

Jotai vs. Redux

Redux 長期以來一直是大型應用程式的狀態管理首選庫，但其冗長的程式碼和樣板代碼使其聲名狼藉。相比之下，Jotai 的基於原子的方法需要較少的程式碼，這可以提高代碼的可讀性和可維護性。

// Redux
const mapStateToProps = (state) => ({ count: state.count })
const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT' }) })

function Counter({ count, increment }) {
  return (
    <div>
      <button onClick={increment}>+</button>
      <div>Count: {count}</div>
    </div>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

// Jotai
const countAtom = atom(0)
const incrementAtom = atom((get) => get(countAtom) + 1)

function Counter() {
  const [count, increment] = useAtom(countAtom, incrementAtom)
  return (
    <div>
      <button onClick={increment}>+</button>
      <div>Count: {count}</div>
    </div>
  )
}

Jotai vs. Recoil

Recoil 是另一個基於原子的狀態管理庫，其在方法上與 Jotai 相似。然而，Recoil 要求將整個應用程式包裹在 RecoilRoot 組件中，而 Jotai 則無需這樣做，使其更容易集成到現有應用程式中。

Jotai 的缺點

沒有完美的庫，Jotai 也不例外。儘管在簡潔性和可讀性方面表現出色，但 Jotai 是一個相對較新的庫，因此社群支援和可用資源可能不如 Redux 和 Recoil 那麼豐富。

結論

Jotai 是 React 狀態管理領域的一個創新進展，提供了一個獨特而有效的解決方案，使開發過程更加流暢。儘管它可能尚未在社群支援方面與 Redux 或 Recoil 競爭，但它的簡潔和優雅使其值得考慮用於下一個 React 項目。

完整代碼

// 使用 Jotai 的完整示例代碼
import { atom, useAtom } from 'jotai'

const countAtom = atom(0)
const incrementAtom = atom(
  (get) => get(countAtom) + 1,
  (get, set) => set(countAtom, get(countAtom) + 1)
)

function Counter() {
  const [count, increment] = useAtom(countAtom, incrementAtom)
  return (
    <div>
      <button onClick={increment}>+</button>
      <div>Count: {count}</div>
    </div>
  )
}

function App() {
  return <Counter />
}

export default App

深入研究 Jotai，探索其廣泛的功能，以有效地管理你的 React 應用程式狀態。隨著你的探索，你將了解到這個簡約而強大的庫如何將 React 狀態管理推向更高的層次。

常見問題

1. Jotai 適用於大型應用程式嗎？ Jotai 的性能能夠隨著應用程式的規模擴展，因此適用於小型和大型應用程式。
2. Jotai 能與 Redux 等其他狀態管理庫共存嗎？ 是的，你可以在同一個項目中使用 Jotai 和 Redux 或其他任何狀態管理庫。
3. Jotai 中的原子是什麼？ 在 Jotai 中，原子是狀態的最小單位。它們可以被讀取和寫入，也可以組合成更複雜的狀態。
4. Jotai 和 Redux Toolkit 類似嗎？ 雖然兩者都旨在簡化 React 的狀態管理，但它們的方法不同。Redux Toolkit 使用基於切片的方法，而 Jotai 使用基於原子的方法。
5. Jotai 如何處理異步操作？ Jotai 可以使用異步原子來處理異步操作，從而根據承諾 (Promise) 更新狀態。