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

Jotai 是一個用於 React 應用程式的簡約狀態(tài)管理函式庫。它提供了一種簡單的原子方法來管理狀態(tài)，可讓您直接在元件內管理和更新狀態(tài)，同時保持架構精簡且易於理解。 Jotai 的設計具有高效能和靈活性，使其成為任何規(guī)模的 React 應用程式（從小型專案到大型應用程式）的絕佳選擇。

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

---

1. Jotai的核心理念

Jotai 引入了一個簡單的 API，其中包含一些關鍵概念，可以輕鬆管理 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 元件中讀取或寫入。

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 讓您建立依賴其他原子或衍生資料的派生原子。這些類似於 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)變更時獲取資料或運行回呼。

範例：

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 呼叫或日誌記錄。

---

2.使用 Jotai 的好處

1.簡單且輕量

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

2.表現(xiàn)

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

3.細粒度控制

Jotai 讓您可以對應用程式中的狀態(tài)進行細微控制。原子是獨立的，可以直接管理，不需要像減速器或上下文提供者這樣的複雜結構。

4.最少的重新渲染

Jotai 透過僅更新訂閱變更的特定原子的元件來最佳化重新渲染，而不是重新渲染整個元件樹。

5.可擴充且靈活

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

---

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 組件內部，用於讀取和更新原子的值。
• setCounter 點選按鈕時更新原子的狀態(tài)。

---

4.何時使用 Jotai

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

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

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

---

5.結論

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

---

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