Recoil: Perpustakaan Pengurusan Negeri untuk React

Recoil ialah perpustakaan pengurusan keadaan untuk React yang menyediakan cara yang berkuasa dan fleksibel untuk mengurus keadaan aplikasi React anda. Ia direka untuk menjadikan pengurusan negeri dalam React lebih mudah dan lebih berskala, sambil menyepadukan dengan lancar dengan paradigma sedia ada React. Dibangunkan oleh Facebook, Recoil memperkenalkan satu set konsep baharu untuk mengendalikan keadaan aplikasi, memberikan pembangun kawalan terperinci ke atas pengurusan negeri, serta prestasi yang lebih baik dan corak yang lebih mudah untuk keadaan yang kompleks.

Recoil sering dilihat sebagai alternatif kepada penyelesaian pengurusan keadaan tradisional seperti Redux atau Context API, menawarkan cara baharu mengurus keadaan yang lebih sesuai dengan aplikasi React moden, terutamanya apabila berurusan dengan aplikasi yang besar dan kompleks.

1. Konsep Teras Recoil

Recoil memperkenalkan beberapa konsep teras yang membantu pembangun mengurus keadaan dengan cara yang lebih deklaratif dan fleksibel:

1. Atom

Satu atom mewakili unit keadaan dalam Recoil. Ia boleh menyimpan sebarang jenis data, dan komponen boleh melanggan atom untuk membaca dan menulis nilainya. Atom membolehkan anda mengurus keadaan yang boleh dikongsi merentasi komponen yang berbeza.

Contoh:

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 digunakan untuk mencipta unit keadaan dalam Recoil. Kunci mestilah unik dan lalai ialah nilai awal keadaan.

2. Pemilih

Pemilih ialah fungsi yang memperoleh keadaan daripada atom atau pemilih lain. Ia membolehkan anda mengira dan mengubah keadaan berdasarkan nilai semasa atom atau pemilih lain.

Contoh:

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

• pemilih membolehkan anda memperoleh keadaan daripada atom. Fungsi get di dalam pemilih mendapat nilai semasa atom dan boleh melakukan pengiraan padanya.

3. RecoilRoot

Untuk menggunakan Recoil dalam aplikasi React, anda perlu membalut komponen akar anda dengan RecoilRoot, yang menyediakan konteks keadaan Recoil kepada apl.

Contoh:

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

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

• RecoilRoot ialah penyedia yang menjadikan keadaan Recoil tersedia untuk keseluruhan aplikasi anda.

4. gunakanRecoilState

Kait useRecoilState adalah serupa dengan useState React tetapi untuk atom Recoil. Ia membolehkan anda membaca dan mengubah suai keadaan atom.

Contoh:

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 membolehkan anda membaca keadaan atom dan mengemas kininya secara terus.

5. gunakanRecoilValue

Jika anda hanya perlu membaca nilai atom atau pemilih tanpa mengubahnya, anda boleh menggunakan useRecoilValue.

Contoh:

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 digunakan apabila anda hanya perlu mengambil nilai atom atau pemilih, tetapi anda tidak perlu mengubah suainya.

6. useSetRecoilState

Jika anda hanya perlu mengubah suai keadaan atom tetapi tidak membacanya, anda boleh menggunakan useSetRecoilState.

Contoh:

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

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

• useSetRecoilState membolehkan anda mengemas kini keadaan atom tanpa perlu membaca nilainya.

2. Kelebihan Recoil

1. Kawalan Berbutir Halus

Tidak seperti penyelesaian pengurusan keadaan lain seperti Redux, Recoil menyediakan cara yang lebih fleksibel dan terperinci untuk mengurus keadaan, membolehkan komponen melanggan atom atau pemilih tertentu.

2. Pengurusan Negeri Asynchronous

Pemilih gegelung boleh mengendalikan operasi tak segerak dengan lancar. Ini memudahkan untuk mengambil data atau melakukan kesan sampingan lain sambil mengekalkan ketekalan keadaan.

3. Dibina untuk React

Recoil direka khusus untuk React, jadi ia memanfaatkan pokok komponen, cangkuk dan mekanisme konteks React, yang membawa kepada corak yang lebih ringkas dan integrasi yang lebih baik.

4. Kurang Boilerplate

Recoil menawarkan API ringkas dengan boilerplate yang minimum. Tidak seperti Redux, tidak perlu mentakrifkan tindakan, pengurang dan fungsi penghantaran, yang menjadikannya lebih cepat untuk bermula.

5. Prestasi Dioptimumkan

Recoil membantu mengoptimumkan prestasi pemaparan dengan mendayakan komponen hanya dipaparkan semula apabila keadaan tertentu (atom atau pemilih) yang dilanggan mereka berubah. Ia mengelakkan pemaparan semula yang tidak perlu, meningkatkan prestasi, terutamanya dalam apl besar.

3. Contoh Aplikasi Recoil Penuh

Berikut ialah contoh cara anda boleh membina apl kaunter mudah menggunakan 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>;
};

Dalam contoh mudah ini:

• Kami mentakrifkan atom (counterState) untuk memegang nilai pembilang.
• Komponen Kaunter menggunakan useRecoilState untuk membaca dan mengemas kini nilai kaunter.
• RecoilRoot digunakan pada akar aplikasi untuk memulakan pengurusan keadaan Recoil.

4. Kesimpulan

Recoil menyediakan penyelesaian moden dan fleksibel untuk pengurusan keadaan dalam aplikasi React. Dengan model atom dan pemilih yang berkuasa, ia membolehkan kemas kini keadaan yang lebih cekap dan mengurangkan kerumitan mengurus keadaan merentas komponen. Ia amat berguna untuk aplikasi di mana keadaan perlu dikongsi dan dikemas kini merentas berbilang komponen.

Atas ialah kandungan terperinci Recoil: Perpustakaan Pengurusan Negeri Moden untuk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!