Recoil：React 的現代狀態管理函式庫-js教程-PHP中文網

Recoil: A Modern State Management Library for React

Recoil：React 的狀態管理函式庫

Recoil 是 React 的狀態管理函式庫，它提供了一種強大、靈活的方法來管理 React 應用程式的狀態。它旨在使 React 中的狀態管理更容易、更具可擴展性，同時與 React 的現有範例無縫整合。 Recoil 由 Facebook 開發，引入了一組處理應用程式狀態的新概念，使開發人員能夠對狀態管理進行細微控制，並為複雜狀態提供更好的效能和更簡單的模式。

Recoil 通常被視為 Redux 或 Context API 等傳統狀態管理解決方案的替代方案，提供更適合現代 React 應用程式的狀態管理新方法，尤其是在處理大型且複雜的應用程式時。

1. Recoil 的核心概念

Recoil 引入了幾個核心概念，幫助開發人員以更具聲明性和靈活的方式管理狀態：

1.原子

原子代表 Recoil 中的一個狀態單位。它可以保存任何類型的數據，並且元件可以訂閱原子來讀取和寫入它們的值。原子允許您管理可以在不同組件之間共享的狀態。

範例：

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

登入後複製

atom 用於在 Recoil 中建立狀態單位。 key必須是唯一的，預設是state的初始值。

2.選擇器

選擇器是從原子或其他選擇器衍生狀態的函數。它們允許您根據原子或其他選擇器的當前值計算和轉換狀態。

範例：

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

登入後複製

選擇器允許您從原子中匯出狀態。選擇器內的 get 函數會取得原子的目前值並可計算。

3. RecoilRoot

要在 React 應用程式中使用 Recoil，您需要使用 RecoilRoot 包裝根元件，它為應用程式提供 Recoil 狀態上下文。

範例：

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

登入後複製

RecoilRoot 是使 Recoil 狀態可用於整個應用程式的提供者。

4. useRecoilState

useRecoilState 鉤子類似 React 的 useState，但針對的是 Recoil 原子。它允許您讀取和修改原子的狀態。

範例：

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

登入後複製

useRecoilState 可讓您讀取原子的狀態並直接更新它。

5. useRecoilValue

如果您只需要讀取原子或選擇器的值而不修改它，可以使用 useRecoilValue.

範例：

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

登入後複製

useRecoilValue 用於只需要取得原子或選擇器的值，但不需要修改它的情況。

6. useSetRecoilState

如果你只需要修改原子的狀態而不需要讀取它，可以使用useSetRecoilState。

範例：

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

登入後複製

useSetRecoilState 允許您更新原子的狀態，而無需讀取其值。

2.反沖的優點

1.細粒度控制

與 Redux 等其他狀態管理解決方案不同，Recoil 提供了更靈活、更細粒度的狀態管理方式，使元件能夠訂閱特定的原子或選擇器。

2.非同步狀態管理

反沖選擇器可以無縫處理非同步操作。這使得在保持狀態一致性的同時可以輕鬆獲取數據或執行其他副作用。

3.專為 React 打造

Recoil 是專為 React 設計的，因此它利用了 React 的元件樹、鉤子和上下文機制，從而實現更簡單的模式和更好的整合。

4.更少的樣板

Recoil 提供了一個最少樣板的簡單 API。與 Redux 不同的是，不需要定義 actions、reducer 和dispatch 函數，這使得上手速度更快。

5.最佳化效能

Recoil 透過讓元件僅在它們訂閱的特定狀態（原子或選擇器）發生變化時重新渲染來幫助最佳化渲染效能。它避免了不必要的重新渲染，提高了效能，尤其是在大型應用程式中。

3.全反沖應用範例

以下範例展示如何使用 Recoil 建立簡單的計數器應用程式：

import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useRecoilState(counterState);

  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 { useRecoilValue } from 'recoil';
import { doubleCounterState } from './selectors';

const DisplayDouble = () => {
  const doubleCounter = useRecoilValue(doubleCounterState);

  return <p>Double Counter: {doubleCounter}</p>;
};

登入後複製

import { useSetRecoilState } from 'recoil';
import { counterState } from './atoms';

const ResetButton = () => {
  const setCounter = useSetRecoilState(counterState);

  const reset = () => setCounter(0);

  return <button onClick={reset}>Reset Counter</button>;
};

登入後複製

在這個簡單的例子中：