آموزش react – کار با useState Hook
اگر شما یک React Developer هستید و هنوز React hooks رو یاد نگرفتید،بهتر است یک زمان را برای یادگرفتن آن در نظر بگیرید.در این مقاله قصد داریم به صورت کامل useState Hook در React رو یاد بگیریم
React Hooks برای حل چه چیزی تلاش می کند؟
Hooks در نسخه 16.8 React معرفی شد و حالا توسط خیلی از تیم هایی که با React کار می کنند،مورد استفاده قرار میگیرد.Hooks مشکل استفاده مجدد از کد بین کامپوننت ها را حل می کند.هوک ها بدون class نوشته شده اند ولی به این معنی نیست که شما دیگر از کلاس ها نمی توانید در React استفاده کنید بلکه تنها یک راه حل جایگزین است.
در React ، شما به زودی با کامپوننت های پیچیده ای با stateful logic روبرو شوید که شکستن این کامپوننت ها کار ساده ای نیست زیرا در داخل class شما به React Lifec Methods به نوعی وابستگی دارید. این جایی است که React Hooks در دسترس است. آنها راهی برای تقسیم یک کامپوننت به توابع کوچکتر را فراهم می کنند. به جای تقسیم کد بر اساس روش های Lifecycle ، اکنون می توانید بر اساس functionalityها ، کد خود را به واحدهای کوچکتر تقسیم کنید.
این یک برد بزرگ برای توسعه دهندگان React است. ما همیشه آموزش نوشتن کلاس های React را که به روش های گیج کننده lifecycle methods. پایبند هستند ، آموزش داده ایم. با معرفی hooks در React خیلی از چیزها ساده تر و راحت تر می شود.
Hooks توابعی هستند که به شما اجازه می دهند از ویژگی state و lifecycle React در function component استفاده کنید.آن ها درون یک class کار نمی کنند.آن ها به شما اجازه می دهند بدون کلاس از ویژگی های React استفاده کنید.
چطور از useState hook استفاده کنیم؟
تا الان متوجه شدیم که hooks ها چرا معرفی شدند.در این مقاله به طور تخصصی و کامل useState رو مورد بررسی قرار می دهیم.هدف useState hook این است که state رو به functional components در React بدون استفاده از class اضافه کند.
قبل از Hooks
در ادامه با استفاده از یک مثال یاد میگیریم که چطور یک class component رو به functional component تبدیل کنیم و state ها را با استفاده از useState hook مدیریت کنیم.
من یک کامپوننت به نام YesNoComponent که شامل دو button است،ایجاد کردم.زمانی که بر روی Yes کلیک کنیم،مقدار “Yes” برای buttonPressed ذخیره(set) می شود و زمانی که بر روی No کلیک کنیم، مقدار “No” برای buttonPressed ذخیره(set) می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | import React from "react"; class YesNoComponent extends React.Component { state = { buttonPressed: "" }; onYesPress() { this.setState({ buttonPressed: "Yes" }); console.log("Yes was pressed"); } onNoPress() { this.setState({ buttonPressed: "No" }); console.log("No was pressed"); } render() { return ( <div> <button onClick={() => this.onYesPress()}>Yes</button> <button onClick={() => this.onNoPress()}>No</button> </div> ); } } export default YesNoComponent; |
Functional Component با Hooks
در ادامه این کامپوننت را با functional component بازنویسی می کنیم.ما قصد داریم به طور کل از شر class خلاص شویم و فقط از یک functional component استفاده کنیم.ممکن است این سوال الان در ذهن شما ایجاد شده باشه که چطور local state رو مدیریت کنیم؟ useState hook برای همین کار ساخته شده است و اینجا به کمک ما می آید.
به مثال زیر که با functional component بازنویسی شده، نگاه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { useState } from "react"; const YesNoComponentFunctional = () => { const [button, setButton] = useState(""); const onYesPress = () => { setButton("Yes"); console.log({ button }); }; const onNoPress = () => { setButton("No"); console.log({ button }); }; return ( <div> <button onClick={() => onYesPress()}>Yes</button> <button onClick={() => onNoPress()}>No</button> </div> ); }; export default YesNoComponentFunctional; |
کامپوننت بالا همان نتایجی مشابه YesNoComponent ایجاد می کند.تنها تفاوتی که وجود دارد این است که این با function نوشته شده و قبلی با class.
جزئیات useState
در قطعه کد بالا چند خط کد مهم وجود دارد که تفاوت ها را رقم می زند.در ادامه هر کدام از خط ها را به دقت بررسی می کنیم.
اولین چیزی که نیاز داریم، ایمپورت کردن useState از React است.
1 | import React, { useState } from "react"; |
گام بعدی تعریف کردن state variable برای کامپوننت است.
1 | const [button, setButton] = useState(""); |
در خط بالا ما یک state به نام button تعریف می کنیم.useState مقدار اولیه برای button را یک empty string در نظر می گیرد.
useState چه چیزی را برمی گرداند؟
useState یک جفت از value ها را بر می گرداند:current state و یک function که مقدار آن را بروزرسانی می کند.در مثال ما current state در واقع button و تابعی که آن را بروزرسانی می کند setButton است.setButton دقیقا مشابه setState در مثال قبلی عمل می کند.
توجه داشته باشید که توابع ()onYesPress و ()onNoPress برای بروزرسانی button state از setButton استفاده می کند.
useState Hook چه کاری انجام می دهد؟
تا اینجا دیدید که چطور می توان یک class component رو به functional component در React تبدیل کرد.همچنین یاد گرفتید که چطور از useState hook در functional component برای مدیریت state ها استفاده کنید.اما واقعا useState Hook چه کاری انجام می دهد و چرا این ویژگی به React اضافه شده؟
- خوانایی و سادگی : دلیل اصلی اضافه شدن این ویژگی به React بالا بردن میزان خوانایی و سادگی کد است.با وجود pure functional components خواندن کد و درک اون خیلی ساده است و پیچیدگی های class را ندارد.
- class ها می توانند گیج کننده باشند: توسعه دهندگانی که React یاد می گیرند،زمانی که مجبور باشند مفاهیم جدیدی مثل classes رو یاد بگیرند، روند یادگیری رو برای اون ها سخت میکنه.Classes می تواند برای توسعه دهندگان مبتدی سخت باشه.آن ها باید درک کنند چطور class ها کار میکنند و binding چطور کار میکنه و مفاهیمی از این قبیل.زمانی که کامپوننت ها با functions به جای classs نوشته میشن، منحنی یادگیری برای برنامه نویسان مبتدی خیلی راحت تر میشه.
امیدوارم که این مقاله براتون مفید واقع شده باشه .اگر قصد دارید به عنوان یک React Developer فعالیت کنید، پیشنهاد می کنم دوره آموزش جامع React Js رو مشاهده کنید.همچنین میتونید برای کسب اطلاعات بشتر در مورد hook l مقاله راهنمای کامل کار با useEffect Hook در React رو مطالعه کنید.
[منبع]
دیدگاهتان را بنویسید