مدیریت حالت یک مفهوم حیاتی در React است که یکی از محبوب‌ترین کتابخانه‌های جاوا اسکریپت در جهان برای ساخت رابط‌های کاربری پویا است.

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

این مقاله به دنیای مدیریت React State می پردازد و راهنمای جامعی را ارائه می دهد تا به شما در مدیریت کارآمد ایالت کمک کند. این مقاله برای مبتدیان و سطح متوسط ​​توسعه دهندگان React است که می خواهند بدانند ایالت ها چگونه کار می کنند.

ایالت چیست؟

State را می توان به عنوان یک شی تعریف کرد که داده هایی را در خود جای می دهد که در طول زمان در یک برنامه تغییر می کند. به عبارت دیگر، state یک ذخیره‌سازی پویا داده است که مکانیزمی را برای مدیریت اجزا، پیگیری تغییرات داده‌ها و شروع رندر مجدد هنگام به‌روزرسانی فراهم می‌کند.

به دلیل ماژولار شدن در React، state به عنوان یک محفظه عمل می کند که داده ها، منطق و رفتار مربوطه را در یک جزء محصور می کند.

اکنون که می دانید وضعیت به چه معناست، می توانید یک برنامه کاربردی را حتی قبل از ساخت آن تجسم کنید و ایده ای داشته باشید که چه داده هایی در حالت های مختلف ذخیره می شوند. این ما را به نقطه ای می رساند که من دوست دارم آن را بنامم: «تفکر در واکنش».

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

زمان استفاده از State

هنگام ساخت یک برنامه، داده ها نقش مهمی در آنچه نمایش داده شده یا ذخیره می شود ایفا می کنند. همین امر در مورد ساخت برنامه‌های وب در React نیز صدق می‌کند، جایی که مؤلفه‌ها داده‌ها را نمایش می‌دهند یا روی آنها کار می‌کنند - که می‌تواند ورودی کاربر، داده‌های واکشی شده از APIها یا هر محتوای پویا دیگری باشد. هنگامی که نیاز به دریافت داده هایی وجود دارد که باید در داخل یک جزء به روز شوند، از حالت استفاده می کنیم.

برای درک بهتر این موضوع، اجازه دهید به مثالی از یک برنامه ساده Todo List نگاه کنیم که در درجه اول موارد ورودی را می پذیرد که در نهایت به فهرست نمایش داده شده اضافه می شوند.

نام آیتم ها قبل از اینکه به صورت پویا به آرایه ای از آیتم ها اضافه شوند، از طریق یک ورودی متنی تعریف می شوند.

پس ، ما دو جنبه مربوط به داده‌ها را شناسایی کرده‌ایم که در صورت فعال شدن تغییر می‌کنند. هر گونه به روز رسانی به داده ها باعث می شود کامپوننت دوباره رندر شود. این دو جنبه برای به روز رسانی داده های خود و اجرای منطق مربوطه متصل به آنها به قلاب useState نیاز دارند.

 const [name, setName] = useState(" ") const [items, setItems] = useState([]);

در بالا، نمایش توابع قلاب useState است که به اجزا اجازه می دهد تا متغیرهای حالت داشته باشند. با توجه به مثال ما از برنامه Todo List، ما تابع useState خود را با یک رشته خالی (“ ”) برای نام آیتم ها و یک آرایه خالی ( [ ] ) برای آیتم ها مقداردهی اولیه کردیم.

توابع useState شامل یک تخصیص ساختارشکن است که مقادیر را از یک آرایه یا خواص را از یک شی استخراج می کند. در این مثال، ما دو مقدار بازگردانده شده توسط توابع useState را استخراج می کنیم.

name و items مقدار فعلی متغیر state را نگه می دارند. در حالی که setName و setItems توابعی هستند که برای به روز رسانی مقدار متغیرهای حالت استفاده می شوند.

می‌توانیم مولفه‌های Header ، Nav ، ListArea و Footer را به JSX جزء App اضافه کنیم. مولفه ریشه ما باید به شکل زیر باشد:

 import { useState } from "react"; export default function App() { const [items, setItems] = useState([]); const [name, setName] = useState(" ") return ( <div> <Header /> <Nav /> <ListArea /> <Footer /> </div> ); }

اجزای جداگانه با JSX آنها باید به شکل زیر باشند:

 function Header() { return <h2>ToDo List</h2>; } function Nav() { return ( <> <input type="text"/> <button>Add</button> </> ); } function ListArea() { return ( <> <ul> <li></li> </ul> </> ); } function Footer() { return ( <> <p>You have items in your cart</p> </> ); }

این یک نمایش ساده از فهرست Todo ما است. بعد، مقداری منطق اضافه می کنیم و حالت ها را زنده می کنیم. در حال حاضر، ایالت ها در جزء App قرار دارند.

محل استفاده از State

هنگام استفاده از state، توجه به این نکته مهم است که در توسعه React دو نوع حالت وجود دارد:

دولت جهانی

اینها حالت هایی هستند که برای هر جزء در برنامه قابل دسترسی هستند. همیشه قبل از بازگرداندن JSX در مولفه اصلی برنامه شما اعلام شده و قرار دارد.

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

ایالت محلی

حالت های محلی به داده های داخلی نگهداری شده توسط یک جزء اشاره دارد. حالت های محلی در داخل مؤلفه های والد در یک برنامه کاربردی قرار دارند. آنها فقط مورد نیاز هستند و در کامپوننت قابل دسترسی هستند.

با استفاده از حالت محلی، مؤلفه ها می توانند به طور مستقل داده های خود را تغییر داده و مدیریت کنند که منجر به پارتیشن بندی در برنامه می شود.

با نگاهی به وضعیت های اعلام شده خود در برنامه Todo List، می توانیم آن name بگوییم ایالت و items محلی است یک کشور جهانی است

دلایل آن عبارتند از:

دو یا چند جزء نیاز به دسترسی به items دارند حالت.

name state فقط برای وارد کردن نام آیتم ها در فهرست items مورد نیاز است.

در اینجا ساختار برنامه Todo List ما با وضعیت ها بر اساس مکان مورد نیاز و منطق اضافه کردن نام آیتم ها به فهرست موارد است:

 import { useState } from "react"; export default function App() { //Global state const [items, setItems] = useState([]); //handler function that takes item as a parameter function handleAddItems(item) { //setter function that returns a new array with elements from current state with a new item setItems((items) => [...items, item]); } return ( <div> <Header /> <Nav handleAddItems={handleAddItems} /> //passing handleAddItems as props <ListArea items={items} /> //passing items as props <Footer items={items} /> //passing items as props </div> ); } function Header() { return <h2>ToDo List</h2>; } function Nav({ handleAddItems }) { //Local state function const [name, setName] = useState(""); //create a handler function that is triggered by Add button const handleAddButtonClick = () => { //creating a newItem object with name and id properties const newItem = { name, id: Date.now() }; //passing the newItem object into the handler function as an argument handleAddItems(newItem); // Reset the input field after adding the item setName(""); }; return ( <> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <button onClick={handleAddButtonClick}>Add</button> </> ); } //ListArea component recieving items as props from global state function ListArea({ items }) { return ( <> <ul> //mapping over items array to get individual item as list items {items.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </> ); } //Footer component recieving items as props from global state function Footer({ items }) { return ( <> {items.length !== 0 ? ( <p>You have {items.length} items in your cart</p> ) : ( <p>You can start adding items to your list</p> )} </> ); }

Footer و اجزای ListArea اکنون به مواردی که از طریق props منتقل می شوند دسترسی دارند.

عمل قرار دادن یک حالت در مؤلفه ریشه به طوری که بتوان به صورت سراسری در یک برنامه React به آن دسترسی داشت به عنوان "Lifting State Up" شناخته می شود - کاری که ما با وضعیت items انجام دادیم.

در اینجا یک نمایش از کل فرآیند است:

نتیجه

در این مقاله، مدیریت وضعیت در React را تحلیل کردیم، زمانی که به آنها نیاز دارید و محل قرار دادن حالت در اجزای برنامه‌هایمان.

ما همچنین نحوه "فکر کردن در React" را توضیح دادیم تا اجزای React ما با یکدیگر تعامل داشته باشند و خروجی مورد نیاز را ارائه دهند.

React یک کتابخانه رابط کاربری جالب است، اما اگر اصول اولیه را ندانید، گاهی اوقات ممکن است گیج کننده شود. اکنون می توانید از دانش به دست آمده در این مقاله برای کدنویسی پروژه های خود استفاده کنید.

خبرکاو