Управление состоянием — важнейший аспект любого приложения React. Хотя встроенный в React Context API является популярным выбором для управления состоянием, у него есть свои ограничения. Zustand — это минималистичная библиотека управления состоянием, которая предлагает более простой и эффективный способ управления состоянием в приложениях React.
Прежде чем мы перейдем к тому, как мы используем Zustand (по какой-то причине я продолжаю читать его как ZuckLand), давайте сначала перейдем к сути: зачем использовать этого нового парня в квартале?
Простота
Zustand предоставляет простой API, который упрощает настройку и использование. Вам не нужно заключать свои компоненты в поставщики или использовать компоненты более высокого порядка.
Производительность
Zustand перерисовывает только те компоненты, на которые действительно влияет изменение состояния, в отличие от Context API, который может привести к ненужным повторным рендерингам.
Гибкость
Zustand позволяет создавать несколько магазинов и использовать их по модульному принципу. Это упрощает управление сложной логикой состояний.
Поверьте мне? Нет? Все эти статьи для того, чтобы завоевать доверие, а вы до сих пор этого не сделали, ладно, давайте реализуем и посмотрим сами.
Шаг 1. Создайте новое приложение React.
Создайте приложение реагирования, используя всемирно известный create-react-app
npx create-react-app
Шаг 2. Установите пакет
Сначала вам нужно установить Zustand. Откройте терминал и запустите
npm install zustand
Шаг 3: Создайте магазин
Создайте новый файл с именем useStore.js
и настройте свой магазин Zustand.
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;
Шаг 4. Используйте Магазин в компонентах
Теперь вы можете использовать это хранилище в своих компонентах React.
import React from "react"; import useStore from "./useStore"; const Counter = () => { const { count, increment, decrement } = useStore(); return ( <div> <button onClick={decrement}>-</button> <span>{count}</span> <button onClick={increment}>+</button> </div> ); }; export default Counter;
Шаг 5. Используйте несколько магазинов
Вы также можете создать несколько хранилищ для разных частей вашего приложения.
// useUserStore.js import create from "zustand"; const useUserStore = create((set) => ({ username: "", setUsername: (name) => set({ username: name }), })); export default useUserStore;
Теперь вы можете использовать несколько хранилищ в одном компоненте.
import React from "react"; import useStore from "./useStore"; import useUserStore from "./useUserStore"; const App = () => { const { count, increment } = useStore(); const { username, setUsername } = useUserStore(); return ( <div> <h1>Hello, {username}</h1> <button onClick={() => setUsername("John")}>Set Username</button> <div> <span>{count}</span> <button onClick={increment}>Increment</button> </div> </div> ); };
Как я уже говорил вам, неверующим, Zustand предлагает более простой, более эффективный и гибкий способ управления состоянием в приложениях React. Его минималистичный API, оптимизация производительности и модульный подход делают его привлекательной альтернативой Context API React. Попробуйте Zustand в своем следующем проекте React и почувствуйте разницу.
Если вам нравятся мои работы, нажмите на 👏, подпишитесь на меня, чтобы увидеть больше контента, и купите мне кофе, если вы чувствуете себя очень щедрым.
На простом английском языке
Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти:
- Обязательно аплодируйте и следуйте за автором! 👏
- Еще больше контента вы можете найти на PlainEnglish.io 🚀
- Подпишитесь на нашу бесплатную еженедельную рассылку. 🗞️
- Следуйте за нами в Twitter(X), LinkedIn, YouTube и Discord.