Jotai: Perpustakaan Pengurusan Negeri yang Mudah dan Berkuasa untuk React

Jotai: Perpustakaan Pengurusan Negeri yang Primitif dan Fleksibel untuk React

Jotai ialah perpustakaan pengurusan negeri minimalis untuk aplikasi React. Ia menawarkan pendekatan atom yang mudah untuk mengurus keadaan, membolehkan anda mengurus dan mengemas kini keadaan terus dalam komponen anda sambil mengekalkan seni bina yang ramping dan mudah difahami. Jotai direka bentuk untuk berprestasi tinggi dan fleksibel, menjadikannya pilihan terbaik untuk aplikasi React dalam sebarang saiz, daripada projek kecil hingga aplikasi berskala besar.

Dengan API ringkas dan saiz berkas kecil, Jotai amat sesuai untuk pembangun yang lebih suka pengurusan keadaan atom tanpa plat dandang yang sering dikaitkan dengan perpustakaan pengurusan negeri yang lebih kompleks seperti Redux.

1. Konsep Teras Jotai

Jotai memperkenalkan API mudah dengan beberapa konsep utama yang memudahkan untuk mengurus keadaan dalam React:

1. Atom

Atom dalam Jotai mewakili unit keadaan terkecil, serupa dengan atom Recoil. Atom memegang satu bahagian keadaan, dan komponen boleh membaca dan menulis nilai atom. Atom boleh diakses secara global dan merupakan asas pengurusan negeri Jotai.

Contoh:

import { atom } from 'jotai';

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

• atom digunakan untuk mentakrifkan unit keadaan. Nilai atom ini boleh dibaca atau ditulis dalam komponen React.

2. useAtom

Kail useAtom ialah cara utama untuk berinteraksi dengan atom dalam Jotai. Ia membolehkan komponen membaca nilai atom dan mengemas kininya. Ini sama seperti menggunakan useState, tetapi dengan keupayaan untuk berkongsi keadaan merentas komponen.

Contoh:

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 digunakan untuk mendapatkan dan menetapkan keadaan bagi atom. Nilai pertama (pebilang) ialah keadaan semasa dan yang kedua (setCounter) ialah fungsi yang digunakan untuk mengemas kini keadaan.

3. Atom Terbitan

Jotai membolehkan anda mencipta atom terbitan yang bergantung pada atom lain atau data terbitan. Ini serupa dengan pemilih Recoil dan membolehkan anda mengira nilai baharu berdasarkan atom lain.

Contoh:

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

• Atom terbitan dicipta menggunakan fungsi yang membaca atom lain dan mengembalikan nilai baharu berdasarkan atom tersebut.

4. Kesan Atom

Jotai juga menyokong kesan atom, yang boleh menjalankan kod sebagai tindak balas kepada perubahan dalam nilai atom. Ini membolehkan anda melakukan kesan sampingan seperti mengambil data atau menjalankan panggilan balik apabila keadaan berubah.

Contoh:

import { atom } from 'jotai';

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

• Corak ini membolehkan melaksanakan kesan sampingan, seperti panggilan API atau pengelogan, apabila keadaan atom berubah.

2. Kebaikan Menggunakan Jotai

1. Mudah dan Ringan

Jotai direka bentuk untuk menjadi minimalis dan ringan, dengan permukaan API yang sangat kecil. Ia tidak memerlukan kod boilerplate seperti pencipta tindakan atau pengurang, menjadikannya lebih pantas untuk bermula.

2. Prestasi

Jotai menggunakan model reaktif, di mana hanya komponen yang menggunakan atom tertentu akan dipaparkan semula apabila atom tersebut berubah. Ini menghasilkan kemas kini yang cekap, terutamanya untuk aplikasi besar dengan banyak komponen.

3. Kawalan Berbutir Halus

Jotai memberi anda kawalan terperinci ke atas keadaan dalam permohonan anda. Atom adalah bebas dan boleh diurus secara langsung tanpa memerlukan struktur kompleks seperti pengurang atau pembekal konteks.

4. Re-Render Minimum

Jotai mengoptimumkan pemaparan semula dengan hanya mengemas kini komponen yang melanggan atom tertentu yang berubah, bukannya memaparkan semula keseluruhan pepohon komponen.

5. Boleh skala dan Fleksibel

Reka bentuk atom Jotai menjadikannya mudah untuk skala apabila aplikasi anda berkembang. Anda boleh mempunyai berbilang atom bebas yang mewakili bahagian berlainan keadaan aplikasi anda, yang menjadikan seni bina bersih dan fleksibel.

3. Contoh Aplikasi Jotai Penuh

Berikut ialah contoh apl kaunter kecil menggunakan 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
  }
);

Cara Ini Berfungsi:

• Atom tahan keadaan untuk pembilang (counterAtom).
• useAtom digunakan di dalam komponen Counter untuk membaca dan mengemas kini nilai atom.
• setCounter mengemas kini keadaan atom apabila butang diklik.

4. Bila Nak Guna Jotai

Jotai ialah pilihan yang bagus apabila:

• Anda memerlukan penyelesaian pengurusan negeri yang minimalis dan cekap.
• Anda mahu mengurus keadaan pada peringkat atom.
• Anda lebih suka API pengisytiharan dan fleksibel tanpa memerlukan plat dandang tambahan.
• Anda sedang mengusahakan projek yang memerlukan prestasi tinggi dan kawalan terperinci ke atas pemaparan semula.

Jika projek anda kecil atau anda ingin mengelakkan kerumitan penyelesaian pengurusan negeri yang lebih besar seperti Redux, Jotai menyediakan alternatif yang mudah dan berkuasa.

5. Kesimpulan

Jotai ialah perpustakaan pengurusan negeri yang berkuasa namun ringan yang memfokuskan pada keadaan atom dan minimalism. Dengan API ringkas, pengoptimuman prestasi dan kawalan terperinci, Jotai ialah pilihan terbaik untuk pembangun React yang mencari penyelesaian pengurusan keadaan yang fleksibel dan cekap.

Atas ialah kandungan terperinci Jotai: Perpustakaan Pengurusan Negeri yang Mudah dan Berkuasa untuk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!