مدیریت حالت در برنامه‌های React در سال‌های اخیر، به ویژه با پیشرفت حالت عملکردی و معرفی هوک‌ها، پیشرفت زیادی کرده است.

توسعه دهندگان انعطاف پذیری بیشتری دارند و مدیریت دولتی به طور کلی ساده تر شده است. اما با رشد برنامه‌ها، مدیریت آن‌ها پیچیده‌تر می‌شود - و ممکن است به یک راه‌حل مدیریت دولتی قوی‌تر نیاز داشته باشید.

قلاب‌های React راه‌حل‌های داخلی را برای مدیریت وضعیت برنامه‌های کاربردی شما ارائه می‌کنند - به عنوان مثال، با قلاب useState() . اما کتابخانه های دیگری مانند MobX ، Zustand و Recoil وجود دارند که می توانند مدیریت ایالت را آسان تر کنند.

در این مقاله، من روی Zustand تمرکز می کنم و آن را با قلاب useState() مقایسه می کنم. اگر می‌خواهید درباره Redux و نحوه مقایسه آن با useState() بیشتر بدانید، می‌توانید مقایسه‌ی useState() و Redux را در اینجا تحلیل کنید.

برای شروع، می‌خواهم مطمئن شوم که نحوه عملکرد هر دو useState() و Zustand را درک می‌کنید. سپس آنها را با هم مقایسه می کنیم تا ببینیم کدام راه حل بهتری برای پروژه شم است.

پیش نیازها

قبل از شروع کدنویسی، لطفاً مطمئن شوید که موارد زیر را دارید:

Node.js روی سیستم شما نصب شده است.

درک اولیه React.js .

ویرایشگر کدی که ترجیح می دهید، مانند Visual Studio Code یا Sublime Text .

نحوه استفاده از useState() برای مدیریت ایالت

تحلیل اجمالی قلاب useState

useState() یک React Hook داخلی است که به اجزای تابعی اجازه می دهد تا بدون استفاده از اجزای کلاس، وضعیت را مدیریت کنند. این یک راه ساده برای اعلام متغیرهای حالت و به روز رسانی آنها در اجزای عملکردی ارائه می دهد.

برای اطلاعات بیشتر در مورد قلاب useState() ، می توانید این آموزش را تحلیل کنید . در React بینش‌ها و مثال‌های مرتبط با useState() را در اختیار شما قرار می‌دهد.

استفاده اولیه و نحو

نحو برای useState() ساده است. یک حالت اولیه را به عنوان آرگومان می گیرد و یک آرایه را با مقدار وضعیت فعلی و یک تابع برای به روز رسانی آن مقدار برمی گرداند.

 const [text, setText] = useState();

بیایید به مثالی از نحوه استفاده از useState() نگاه کنیم.

وضعیت اولیه برنامه:

 const Usestate = () => { return ( <div className='container'> <h1> State management using useState() </h1> <br /> <div className='input'> <input type='text' className='input' /> <button> Change Color </button> </div> </div> ); } export default Usestate;

در کد بالا یک کامپوننت React به نام Usestate داریم. این یک رابط ساده با عنوان "State management using useState()"، یک فیلد ورودی متن و یک دکمه با برچسب "Change color" ارائه می کند.

در اینجا نتیجه آن کد است:

که وضعیت اولیه برنامه را نشان می دهد" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/05/useState---zustand.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/05/useState---zustand.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/05/useState---zustand.png 1600w, https://www.freecodecamp.org/news/content/images/2024/05/useState---zustand.png 1920w" sizes="(min-width: 1200px) 1200px" width="1920" height="970" loading="lazy">

حال، اجازه دهید useState() را اضافه کرده و آن را کاربردی کنیم. این هم کد:

 import { useState } from "react"; const Usestate = () => { const [text, setText] = useState('black'); const [color, setColor] = useState('black'); // Another state to store the chosen color by the user const handleInputChange = (e) => { setText(e.target.value); }; // A function has been declared const handleButtonClick = () => { setColor(text); // it updates the chosen color when the button is clicked }; return ( <div className='container'> <h1 style={{color:color}}> State management using useState() </h1> <br /> <div className='input'> <input type='text' className='input' value={text} onChange={handleInputChange} /> <button className='btn' onClick={handleButtonClick}> Change Color </button> </div> </div> ); } export default Usestate;

در کد بالا، text متغیر حالت با استفاده از useState() روی حالت اولیه (رنگ) تنظیم شده است. تابع setText طوری تنظیم شده است که با کلیک روی دکمه، مقدار رنگ را به روز کند.

حالت دوم تعریف شده به روز رسانی رنگ را از کاربر ذخیره می کند. پس رنگ text تا زمانی که دکمه کلیک نشود بدون تغییر باقی می ماند. پس از کلیک روی دکمه، وضعیت رنگ با مقدار text به روز می شود و رنگ text به آنچه کاربر تایپ می کند تغییر می کند.

نتیجه این است:

به برنامه" width="1920" height="971" loading="lazy">

مزایا و معایب useState()

طرفداران:

برای React تعبیه شده است، پس نیازی به وابستگی اضافی نیست.

API ساده و شهودی، آسان برای درک و استفاده.

معایب:

محدود به مدیریت وضعیت مؤلفه محلی است.

می تواند منجر به حفاری پایه در اجزای عمیق تو در تو شود که اگر حفاری پایه را درک نکنید، می تواند باعث سردرگمی شود.

سناریوهای مدیریت پیچیده ممکن است نیاز به منطق بیشتری داشته باشند.

برای کسب اطلاعات بیشتر در مورد useState() و سایر قلاب های کاربردی، این مقاله را تحلیل کنید: برنامه نویسی React خود را بدون دردسر با این 8 هوک شگفت انگیز ساده کنید .

نحوه استفاده از کتابخانه Zustand برای مدیریت دولتی

مروری بر Zustand

Zustand یک ابزار مدیریت حالت مفید برای مدیریت وضعیت در برنامه های React است. کوچک است، به سرعت کار می کند و با نیازهای شما رشد می کند.

با Zustand ، می‌توانید حالت‌هایی را به‌صورت جهانی ایجاد و به‌روزرسانی کنید که به راحتی بین بخش‌های مختلف برنامه شما به اشتراک گذاشته شود. مانند این است که یک مرکز مرکزی برای اطلاعات برنامه خود داشته باشید که سازماندهی و دسترسی به داده ها را از هر نقطه در برنامه شما ساده می کند.

استفاده و نحو اولیه Zustand

برای شروع با Zustand، مراحل زیر را دنبال کنید:

ابتدا با نصب Zustand در برنامه React خود با استفاده از دستور شروع کنید:

 npm install zustand // or yarn add zustand

سپس، در برنامه React خود، به دایرکتوری src بروید و یک پوشه جدید به نام store ایجاد کنید.

در داخل پوشه store ، یک فایل با نام color.js (یا هر نام ترجیحی) ایجاد کنید. این یک فایل جاوا اسکریپت برای تعریف وضعیت شم است.

سپس، در آن فایل color.js ، تابع create را از Zustand وارد کنید تا مدیریت حالت خود را شروع کنید:

 import { create } from zustand

ما از تابع create برای ساختن یک هوک سفارشی استفاده می کنیم که به عنوان نقطه دسترسی اصلی به فروشگاه ما عمل می کند.

فایل color.js جایی است که ما تمام مقادیر حالت و اقدامات خود را نگه می داریم. اقدامات را به عنوان مقادیر به روز شده در نظر بگیرید. این شبیه به نحوه استفاده از useState() است.

 import { create } from 'zustand'; // Create a custom hook called useColor export const useColor = create((set) => ({ // Initial state: text and color both set to 'black' text: 'black', color: 'black', // Function to update text state setText: (text) => set({ text }), // Function to update color state setColor: (color) => set({ color }), }));

بیایید تحلیل کنیم که این کد چه کاری انجام می دهد:

این کد یک ابزار ویژه (قلاب) به نام useColor با استفاده از Zustand ایجاد می کند.

ابزار useColor به پیگیری دو چیز کمک می کند: متن و رنگ.

در ابتدا، متن و رنگ هر دو روی "سیاه" تنظیم می شوند.

دو ابزار دیگر در داخل useColor وجود دارد: setText که برای تغییر متن به هر چیزی که می‌خواهیم استفاده می‌شود و setColor که برای تغییر رنگ به هر رنگی که انتخاب می‌کنیم استفاده می‌شود.

ایجاد این فروشگاه شامل تعریف آن در یک فایل است. این باعث می شود که در کل برنامه شما قابل استفاده مجدد باشد و آن را جهانی کند. نیاز به نگرانی در مورد عبور وسایل را از بین می برد.

سپس باید آن را به مؤلفه خود منتقل کنید تا مورد استفاده قرار گیرد:

 // First we will import useColor from a folder named 'store' import { useColor } from '../store/color'; const UseZustand = () => { // we will bring in the functions we defined in color.js and destructure it so we can use it in our component // pass a state into the custom hook we created; this state will now be used to set and update the values const { text, color, setText, setColor } = useColor((state) => ({ text: state.text, color: state.color, setText: state.setText, setColor: state.setColor, })); const handleInputChange = (e) => { setText(e.target.value); }; //Function defined for the button // When the button is clicked, we use setColor to change the color to what we typed const handleButtonClick = () => { setColor(text); }; return ( <div className='container'> <h1 style={{ color: color }}> State management using Zustand </h1> <br /> <div className='input'> <input type='text' className='input' value={text} onChange={handleInputChange} /> <button className='btn' onClick={handleButtonClick}> Change Color </button> </div> </div> ); }; export default UseZustand;

به طور خلاصه:

ما از ابزاری به نام useColor برای پیگیری متن و رنگ استفاده می کنیم.

در داخل بخش برنامه ما UseZustand )، به کاربران اجازه می‌دهیم چیزی را تایپ کنند و با کلیک کردن روی یک دکمه، رنگ آن را تغییر دهند.

در اینجا خروجی نهایی چگونه به نظر می رسد:

از zustand در برنامه" width="1920" height="971" loading="lazy">

مزایا و معایب Zustand

طرفداران:

مدیریت دولتی جهانی بدون حفاری پایه.

ساده و مختصر برای تعریف و دسترسی به حالت.

پشتیبانی داخلی از میان افزار و ابزارهای توسعه.

معایب:

در مقایسه با useState به وابستگی بیشتری نیاز دارد.

ممکن است یک منحنی یادگیری برای توسعه دهندگان تازه وارد به کتابخانه معرفی کند.

Zustand چه تفاوتی با useState دارد؟

برخلاف useState() ، Zustand به توسعه دهندگان اجازه می دهد تا حالت جهانی ایجاد و مدیریت کنند که می توان از هر جزء در برنامه بدون حفاری پایه به آن دسترسی داشت.

رویکرد متمرکز تری به مدیریت دولتی ارائه می دهد.

عواملی که هنگام انتخاب بین Zustand و useState باید در نظر گرفته شوند

در اینجا چند نکته ساده وجود دارد که هنگام انتخاب بین Zustand و useState باید به آنها فکر کنید:

پیچیدگی حالت : اگر وضعیت برنامه شما ساده است، useState ممکن است خوب باشد. اما برای نیازهای پیچیده تر دولت، Zustand می تواند بهتر باشد.

سرعت : Zustand به سریع بودن معروف است، که اگر برنامه شما نیاز به سریع بودن داشته باشد عالی است.

مهارت های تیمی : اگر تیم شما از قبل می داند که چگونه از React Hooks استفاده کند، ممکن است useState آسان تر باشد. اما اگر آنها آماده یادگیری چیز جدیدی هستند، Zustand می تواند ارزش امتحان کردن را داشته باشد.

رشد برنامه : در نظر بگیرید که چگونه برنامه شما ممکن است در طول زمان رشد کند. رویکرد متمرکز Zustand می تواند مدیریت وضعیت را با بزرگتر شدن برنامه شما آسان تر کند.

پشتیبانی انجمن: ببینید چه منابع و کمکی برای Zustand و useState در دسترس است. یک جامعه قوی می تواند مفید باشد.

فکر کردن به این چیزها باید به شما کمک کند تصمیم بگیرید. این به شما نشان می دهد که کدام گزینه مدیریت ایالت برای پروژه شما بهترین است.

تفاوت بین این دو ابزار مدیریت دولتی چیست؟

تفاوت این دو ابزار در ویژگی آنها نهفته است با این کار می توانید آگاهانه تصمیم بگیرید.

موارد استفاده

برای مدیریت حالت ساده، useState() اغلب کافی است.

Zustand مزایایی مانند حالت متمرکز و کاهش حفاری پایه در برنامه های پیچیده را ارائه می دهد.

در مورد عملکرد، Zustand به گونه ای ساخته شده است که سریع و کارآمد باشد. این برای کاهش رندرهای مجدد غیرضروری اجزای شما ساخته شده است. اینها می توانند برنامه شما را روان تر کنند.

نمی دانید با useState() یا zustand چه بسازید؟ می‌توانید این اپلیکیشن بسیار ساده را که با React: Birthday Reminder ساخته شده است، تحلیل کنید. و اینجا در GitHub من است.

نتیجه

در نتیجه، Zustand و useState() هر دو برای مدیریت وضعیت در React مفید هستند. آنها اهداف مختلفی را بر اساس نیازها و مقیاس پروژه شما انجام می دهند. شما باید نقاط قوت و ضعف هر رویکرد را درک کنید تا بهترین گزینه مدیریت حالت را برای برنامه خود انتخاب کنید.

آیا قبلا Zustand یا useState() استفاده کرده اید؟ تجربیات، بینش و نکات خود را در توییتر به اشتراک بگذارید! نظرات شما می تواند تفاوت واقعی برای توسعه دهندگان دیگری که با مدیریت حالت در React دست و پنجه نرم می کنند ایجاد کند.

برای کسب اطلاعات بیشتر می توانید مستندات Zustand را مطالعه کنید.

اگر این مقاله برای شما مفید بود، آن را با دیگران به اشتراک بگذارید که ممکن است آن را نیز جالب بدانند.

با دنبال کردن من در توییتر و لینکدین یا تحلیل BioDrop من، از پروژه های من به روز بمانید.

اگر از کاری که من انجام می‌دهم لذت می‌برید و می‌خواهید حمایت خود را نشان دهید یا می‌خواهید برخی از آن‌ها را نشان دهید ، در نظر بگیرید که برای من یک قهوه بنوشید یا از eB Ook من برای بچه‌ها دیدن کنید! حمایت شما برای من ارزش زیادی دارد!

به یادگیری ادامه دهید، به اشتراک گذاری ادامه دهید و کدنویسی را خوشحال کنید!

ممنون که خواندید💖.

خبرکاو