Jotai：一個原始而靈活的 React 狀態(tài)管理庫

Jotai 是一個用于 React 應用程序的簡約狀態(tài)管理庫。它提供了一種簡單的原子方法來管理狀態(tài)，允許您直接在組件內(nèi)管理和更新狀態(tài)，同時保持架構(gòu)精簡且易于理解。 Jotai 的設計具有高性能和靈活性，使其成為任何規(guī)模的 React 應用程序（從小型項目到大型應用程序）的絕佳選擇。

憑借其簡單的 API 和較小的包大小，Jotai 特別適合喜歡原子狀態(tài)管理的開發(fā)人員，而無需通常與 Redux 等更復雜的狀態(tài)管理庫相關(guān)的樣板。

---

1. Jotai的核心理念

Jotai 引入了一個簡單的 API，其中包含一些關(guān)鍵概念，可以輕松管理 React 中的狀態(tài)：

1.原子

Jotai 中的原子代表最小的狀態(tài)單位，類似于 Recoil 的原子。原子保存單個狀態(tài)，組件可以讀取和寫入原子的值。 Atom 是全球可訪問的，是 Jotai 狀態(tài)管理的基礎。

示例：

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• atom 用于定義狀態(tài)單元。該原子的值可以在 React 組件中讀取或?qū)懭搿?/li>

2.使用Atom

useAtom 鉤子是 Jotai 中與原子交互的主要方式。它允許組件讀取原子的值并更新它。這與使用 useState 類似，但能夠跨組件共享狀態(tài)。

示例：

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useAtom 用于獲取和設置原子的狀態(tài)。第一個值（counter）是當前狀態(tài)，第二個值（setCounter）是用于更新狀態(tài)的函數(shù)。

3.派生原子

Jotai 允許您創(chuàng)建依賴于其他原子或派生數(shù)據(jù)的派生原子。這些類似于 Recoil 的選擇器，允許您根據(jù)其他原子計算新值。

示例：

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

• 派生原子是使用讀取其他原子并基于這些原子返回新值的函數(shù)創(chuàng)建的。

4.原子效應

Jotai 還支持原子效果，它可以運行代碼以響應原子值的變化。這允許您執(zhí)行副作用，例如在狀態(tài)更改時獲取數(shù)據(jù)或運行回調(diào)。

示例：

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• 只要原子狀態(tài)發(fā)生變化，此模式就可以執(zhí)行副作用，例如 API 調(diào)用或日志記錄。

---

2.使用 Jotai 的好處

1.簡單且輕量

Jotai 的設計是簡約且輕量級的，API 接口非常小。它不需要像動作創(chuàng)建器或減速器這樣的樣板代碼，從而可以更快地開始使用。

2.表現(xiàn)

Jotai 使用 reactive 模型，其中只有使用特定原子的組件才會在該原子發(fā)生變化時重新渲染。這可以實現(xiàn)高效的更新，特別是對于具有許多組件的大型應用程序。

3.細粒度控制

Jotai 使您可以對應用程序中的狀態(tài)進行細粒度控制。原子是獨立的，可以直接管理，不需要像減速器或上下文提供者這樣的復雜結(jié)構(gòu)。

4.最少的重新渲染

Jotai 通過僅更新訂閱更改的特定原子的組件來優(yōu)化重新渲染，而不是重新渲染整個組件樹。

5.可擴展且靈活

Jotai 的原子設計使其能夠隨著應用程序的增長而輕松擴展。您可以擁有多個獨立的原子來代表應用程序狀態(tài)的不同部分，這使得架構(gòu)干凈且靈活。

---

3.完整 Jotai 應用示例

這是使用 Jotai 的小型計數(shù)器應用程序的示例：

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

工作原理：

• 原子 保存計數(shù)器 (counterAtom) 的狀態(tài)。
• useAtom 用于 Counter 組件內(nèi)部，用于讀取和更新原子的值。
• setCounter 單擊按鈕時更新原子的狀態(tài)。

---

4.何時使用 Jotai

Jotai 在以下情況下是一個不錯的選擇：

• 您需要一個簡約且高效的狀態(tài)管理解決方案。
• 您想要在原子級別管理狀態(tài)。
• 您更喜歡聲明式且靈活的 API，而不需要額外的樣板。
• 您正在開發(fā)一個需要高性能和對重新渲染進行細粒度控制的項目。

如果您的項目很小或者您想避免 Redux 等大型狀態(tài)管理解決方案的復雜性，Jotai 提供了一個簡單而強大的替代方案。

---

5.結(jié)論

Jotai 是一個強大而輕量級的狀態(tài)管理庫，專注于原子狀態(tài)和極簡主義。憑借其簡單的 API、性能優(yōu)化和細粒度的控制，Jotai 是尋求靈活、高效的狀態(tài)管理解決方案的 React 開發(fā)人員的絕佳選擇。

---

以上是Jotai：一個簡單而強大的 React 狀態(tài)管理庫的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！