Jotai：一個簡單而強大的 React 狀態管理函式庫-js教程-PHP中文網

Jotai: A Simple and Powerful State Management Library for React

Jotai：一個原始且靈活的 React 狀態管理庫

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

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

1. Jotai的核心理念

Jotai 引入了一個簡單的 API，其中包含一些關鍵概念，可以輕鬆管理 React 中的狀態：

1.原子

Jotai 中的原子代表最小的狀態單位，類似 Recoil 的原子。原子保存單一狀態，元件可以讀取和寫入原子的值。 Atom 是全球可存取的，也是 Jotai 狀態管理的基礎。

範例：

import { atom } from 'jotai';

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

登入後複製

atom 用來定義狀態單元。該原子的值可以在 React 元件中讀取或寫入。

2.使用Atom

useAtom 鉤子是 Jotai 中與原子互動的主要方式。它允許組件讀取原子的值並更新它。這與使用 useState 類似，但能夠跨元件共用狀態。

範例：

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 用來取得和設定原子的狀態。第一個值（counter）是目前狀態，第二個值（setCounter）是用來更新狀態的函數。

3.派生原子

Jotai 讓您建立依賴其他原子或衍生資料的派生原子。這些類似於 Recoil 的選擇器，可讓您根據其他原子計算新值。

範例：

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
});

登入後複製

派生原子是使用讀取其他原子並基於這些原子返回新值的函數創建的。

4.原子效應

Jotai 也支援原子效果，它可以運行程式碼以響應原子值的變化。這允許您執行副作用，例如在狀態變更時獲取資料或運行回呼。

範例：

import { atom } from 'jotai';

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

登入後複製

只要原子狀態發生變化，此模式就可以執行副作用，例如 API 呼叫或日誌記錄。

2.使用 Jotai 的好處

1.簡單且輕量

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

2.表現

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

3.細粒度控制

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

4.最少的重新渲染

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

5.可擴充且靈活

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

3.完整 Jotai 應用範例

這是使用 Jotai 的小型計數器應用程式的範例：

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
  }
);

登入後複製