Rumah hujung hadapan web tutorial js Zustand: Pengurusan Negeri yang Mudah, Pantas dan Berskala untuk Reaksi

Zustand: Pengurusan Negeri yang Mudah, Pantas dan Berskala untuk Reaksi

Dec 19, 2024 am 08:38 AM

Zustand: Simple, Fast, and Scalable State Management for React

Zustand: Penyelesaian Pengurusan Negeri yang Kecil, Pantas dan Berskala untuk Reaksi

Zustand ialah perpustakaan pengurusan negeri yang minimalis, pantas dan berskala untuk React. Ia bertujuan untuk menawarkan penyelesaian yang ringkas dan tanpa boilerplate untuk pengurusan negeri dengan fokus pada prestasi dan kebolehskalaan. Zustand berfungsi dengan mencipta kedai yang mengurus keadaan dan menyediakan cangkuk mudah untuk mengakses dan mengemas kini keadaan.

Nama perpustakaan, Zustand, berasal daripada perkataan Jerman untuk "keadaan", dan ia direka untuk menjadikan kerja dengan keadaan dalam React menjadi intuitif dan berkuasa. Zustand terserlah kerana kesederhanaan dan fleksibilitinya, menjadikannya pilihan terbaik untuk mengurus kedua-dua keadaan tempatan dan global dalam aplikasi React.


1. Apa itu Zustand?

Zustand ialah perpustakaan pengurusan keadaan yang kecil, tidak mempunyai pendapat dan reaktif untuk aplikasi React. Ia menyediakan kedai fleksibel dengan cangkuk yang membolehkan anda mengakses dan mengubah keadaan dengan mudah. Zustand tidak terikat dengan mana-mana seni bina tertentu, bermakna anda boleh menggunakannya untuk mengurus keadaan secara global atau setempat tanpa memperkenalkan kerumitan yang tidak perlu.

Ciri utama Zustand:

  • API Minimalis: Zustand mempunyai API ringkas dengan baris kod yang sangat sedikit.
  • Tiada Boilerplate: Tidak seperti Redux, Zustand tidak memerlukan tindakan atau pengurang untuk berfungsi dan ia tidak memerlukan persediaan tambahan.
  • Berasaskan kedai: Zustand menggunakan kedai untuk mengurus keadaan aplikasi, menjadikannya mudah untuk disusun dan dibuat skala.
  • Mesra tindak balas: Zustand disepadukan dengan lancar dengan React, memanfaatkan cangkuk dan API konteks.

2. Konsep Teras Zustand

1. Kedai

kedai dalam Zustand hanyalah objek yang memegang keadaan aplikasi. Ia boleh ditakrifkan menggunakan fungsi cipta yang disediakan oleh Zustand dan anda boleh memasukkan kaedah untuk memanipulasi keadaan.

Contoh:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  • Cakuk useStore ialah kedai yang dibuat menggunakan fungsi cipta Zustand. Keadaan disimpan dalam kiraan dan tindakan seperti kenaikan dan penurunan mengubah suai keadaan.

2. Mengakses Negeri

Setelah anda membuat kedai, anda boleh menggunakan cangkuk useStore dalam komponen React anda untuk membaca dan mengubah suai keadaan.

Contoh:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
  • Cakuk useStore memberi anda akses kepada keadaan dan tindakan yang ditakrifkan dalam kedai anda. Anda boleh memusnahkan keadaan dan tindakan yang anda perlukan dan menggunakannya terus dalam komponen anda.

3. Mengemas kini Keadaan

Untuk mengemas kini keadaan, anda menggunakan kaedah set yang disediakan di kedai. Kaedah set mengambil fungsi yang mendapat keadaan semasa dan mengembalikan keadaan baharu. Zustand secara automatik mencetuskan pemaparan semula untuk komponen yang menggunakan keadaan yang telah berubah.

Contoh:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Salin selepas log masuk
Salin selepas log masuk
  • Kaedah kenaikan menggunakan fungsi set untuk mengemas kini keadaan kiraan dengan menambah nilai semasanya.

3. Kelebihan Zustand

1. Ringkas dan Minimalis

Zustand ringan dan mempunyai API yang sangat ringkas, yang menjadikannya sangat mudah untuk mula digunakan dalam mana-mana aplikasi React. Ketiadaan kod boilerplate, pengurang atau jenis tindakan menjadikannya alternatif yang bagus untuk mengurus keadaan dalam React tanpa kerumitan yang terdapat dalam perpustakaan lain seperti Redux.

2. Boleh skala

Zustand boleh membuat skala dengan mudah untuk aplikasi yang kompleks. Ia menyokong kedua-dua pengurusan negeri tempatan (untuk komponen individu) dan pengurusan negeri global merentas aplikasi anda. Zustand direka bentuk untuk mengendalikan aplikasi yang besar dan berskala dengan overhed minimum.

3. Prestasi Dioptimumkan

Zustand menggunakan cangkuk dan konteks terbina dalam React untuk melanggan dengan cekap untuk menyatakan perubahan dan mengemas kini hanya komponen yang perlu dipaparkan semula. Ini memastikan prestasi hebat walaupun dalam aplikasi yang lebih besar.

4. Sokongan TypeScript

Zustand mempunyai sokongan TypeScript yang sangat baik, menyediakan kedai selamat jenis dan cangkuk keluar dari kotak.

5. Tiada Pembekal Diperlukan

Tidak seperti sesetengah perpustakaan pengurusan negeri, Zustand tidak memerlukan penyedia untuk dililitkan pada aplikasi anda. Keadaan ini boleh diakses terus melalui cangkuk, menjadikannya mudah digunakan tanpa persediaan tambahan.

6. Fleksibel dan Tanpa Pendapat

Zustand tidak menguatkuasakan sebarang corak atau sekatan. Anda boleh menstruktur keadaan anda walau bagaimanapun anda suka dan menggunakan Zustand sebagai kedai tempatan atau pengurus negeri global. Ia memberi anda fleksibiliti penuh untuk mengatur keadaan aplikasi anda dengan cara yang paling sesuai untuk anda.


4. Mengintegrasikan Zustand dengan React

Mengintegrasikan Zustand ke dalam aplikasi React adalah sangat mudah. Berikut ialah panduan langkah demi langkah untuk menyediakan Zustand dalam apl React:

Langkah 1: Pasang Zustand

Untuk memasang Zustand, jalankan arahan berikut:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Langkah 2: Buat Kedai

Buat kedai yang menyimpan keadaan aplikasi dan tindakan anda. Berikut ialah contoh kedai kaunter mudah:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Salin selepas log masuk
Salin selepas log masuk

Langkah 3: Gunakan Kedai dalam Komponen

Sekarang anda telah mencipta kedai, anda boleh mengakses keadaan dan tindakan dalam komponen React anda menggunakan cangkuk useStore.

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
Salin selepas log masuk
  • Dalam contoh ini, useStore digunakan untuk mengakses kiraan semasa dan kaedah untuk mengubah suai kiraan (kenaikan dan pengurangan).

Langkah 4: Gunakan Komponen dalam Apl Anda

Akhir sekali, anda boleh memaparkan komponen Kaunter dalam apl anda.

npm install zustand
Salin selepas log masuk

5. Ciri Lanjutan Zustand

1. Keadaan Berterusan

Zustand menyediakan perisian tengah untuk mengekalkan keadaan kepada localStorage, sessionStorage atau mekanisme storan lain.

Contoh:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;
Salin selepas log masuk
  • Perisian tengah ini akan mengekalkan keadaan kiraan ke localStorage supaya keadaan itu dikekalkan walaupun selepas dimuat semula halaman.

2. Menggabungkan Pelbagai Kedai

Zustand membenarkan anda menggabungkan berbilang kedai jika anda ingin memisahkan kebimbangan atau mengurus bahagian yang berbeza.

Contoh:

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;
Salin selepas log masuk
  • Di sini, kami mempunyai dua kedai bebas untuk data pengguna dan produk. Anda boleh mengimport dan menggunakannya secara berasingan dalam komponen anda.

6. Kesimpulan

Zustand menawarkan penyelesaian minimalis, fleksibel dan berprestasi untuk mengurus keadaan dalam aplikasi React. Kesederhanaan dan kebolehskalaannya menjadikannya pilihan yang sangat baik untuk aplikasi React kecil dan besar. Dengan menggunakan cangkuk dan corak reaktif, Zustand membenarkan pembangun menumpukan pada membina aplikasi mereka tanpa perlu mengurus boilerplate perpustakaan pengurusan negeri yang lain.

Sama ada anda sedang membina apl kecil atau aplikasi berskala besar, Zustand menyediakan cara yang ringan, cekap dan berskala untuk mengurus keadaan dalam React.


Atas ialah kandungan terperinci Zustand: Pengurusan Negeri yang Mudah, Pantas dan Berskala untuk Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Sistem Fusion, dijelaskan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1672
14
Tutorial PHP
1277
29
Tutorial C#
1257
24
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Apr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

JavaScript dan Web: Fungsi teras dan kes penggunaan JavaScript dan Web: Fungsi teras dan kes penggunaan Apr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

JavaScript in Action: Contoh dan projek dunia nyata JavaScript in Action: Contoh dan projek dunia nyata Apr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

Memahami Enjin JavaScript: Butiran Pelaksanaan Memahami Enjin JavaScript: Butiran Pelaksanaan Apr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber Apr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Python vs JavaScript: Persekitaran dan Alat Pembangunan Python vs JavaScript: Persekitaran dan Alat Pembangunan Apr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Peranan C/C dalam JavaScript Jurubah dan Penyusun Peranan C/C dalam JavaScript Jurubah dan Penyusun Apr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScript Dari laman web ke aplikasi: Aplikasi pelbagai JavaScript Apr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

See all articles