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

در مقاله قبلی ، من در مورد React Hook های مختلف و نحوه کار آنها به همراه نمونه کد و توضیحات مفصل صحبت کردم.

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

آنچه را پوشش خواهیم داد:

این راهنما چه سودی برای شما خواهد داشت؟

پیش نیازها

React State باید تغییرناپذیر باشد

از State برای همه چیز استفاده نکنید

استخراج ارزش ها بدون دولت

محاسبه مقادیر بدون تأثیر

کلیدها باید منحصر به فرد باشند

از useEffect Last استفاده کنید

نتیجه گیری:

این راهنما چه سودی برای شما خواهد داشت؟

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

این راهنما مانند روش بهینه بریدن پارچه با قیچی به جای چاقو است. من به شما یاد خواهم داد که چگونه از React راحت تر و بدون زحمت زیاد استفاده کنید. ما جنبه های مهم نحوه کار React Hooks را مورد بحث قرار خواهیم داد و همچنین برخی از بایدها و نبایدها را پوشش خواهیم داد.

پیش نیازها

تنها یک پیش نیاز اصلی برای دنبال کردن این راهنما وجود دارد: باید حداقل یک بار از قلاب‌های React استفاده کرده باشید. و منظور من از این است که برنامه ای را با React توسعه داده است که از قدرت هوک ها استفاده می کند.

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

React State باید تغییرناپذیر باشد

آیا تا به حال فکر کرده اید که چرا React در مورد تغییرناپذیری این همه سر و صدا می کند؟ 🤔 به عنوان یک تازه کار، ممکن است فکر کنید که جهش های جاوا اسکریپت کاملاً خوب است. پس از همه، ما ویژگی ها را از اشیا اضافه یا حذف می کنیم و آرایه ها را به راحتی دستکاری می کنیم.

اما پیچش اینجاست: در React، تغییرناپذیری به معنای عدم تغییر حالت نیست، بلکه در مورد اطمینان از ثبات است.

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

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

 const updatedUsers = [...users, newUser];

کد const updatedUsers = [...users, newUser]; از عملگر spread برای ایجاد یک آرایه جدید updatedUsers استفاده می کند که users موجود را با newUser ترکیب می کند.

این رویکرد با تغییر نکردن آرایه users اصلی تغییر ناپذیری را در React حفظ می کند. در عوض، یک نمایش حالت جدید ایجاد می‌کند و به React اجازه می‌دهد تا رندرینگ را بهینه کند و از تغییرات وضعیت قابل پیش‌بینی اطمینان حاصل کند. وقتی حالت را با استفاده از setUsers(updatedUsers); React کامپوننت را بر اساس این آرایه جدید، با رعایت بهترین شیوه‌های مدیریت حالت، مجدداً ارائه می‌کند.

این تضمین می‌کند که React تغییر را تشخیص داده و کامپوننت شما را دوباره به‌راحتی رندر می‌کند.

useState برای همه چیز استفاده نکنید

زمان اعتراف: من عادت داشتم همه چیز را بدون دوبار فکر کردن به useState بیاندازم. 🚀 اما نکته اینجاست: لازم نیست همه چیز در حالت باشد. ایالت قدرتمند است، اما استفاده بیش از حد از آن می‌تواند منجر به کد پیچیده و ناکارآمد شود.

جایگزین هایی مانند وضعیت سرور، وضعیت URL یا ذخیره سازی محلی را در نظر بگیرید. برای داده های سرور، کتابخانه هایی مانند React Query یک تغییر دهنده بازی هستند. آنها واکشی و ذخیره سازی را انجام می دهند، پس شما مجبور نیستید آن را به صورت دستی مدیریت کنید. برای وضعیت URL، از قلاب‌هایی مانند useLocation از React Router یا روش‌های داخلی Next.js استفاده کنید.

چک فهرست قبل از استفاده از useState:

آیا این مقدار در حین رندر ساده و قابل استخراج است؟

آیا کتابخانه ای از قبل این وضعیت را مدیریت می کند؟

آیا باید رندر مجدد را راه اندازی کند؟

اگر به همه پاسخ «نه» بدهید، ممکن است اصلاً به useState نیاز نداشته باشید.

استخراج ارزش ها بدون دولت

در اینجا یک ترفند کمتر شناخته شده است: ارزش های مشتق شده نیازی به زندگی در حالت ندارند. 🚀 اگر داده‌های شما را می‌توان از حالت‌ها یا پروپ‌های موجود محاسبه کرد، آن را مستقیماً در حین رندر محاسبه کنید.

به عنوان مثال، قالب‌بندی تاریخ را می‌توان در لحظه بدون قلاب اضافی انجام داد:

 const formattedDate = new Date (date).toLocaleDateString();

کد const formattedDate = new Date(date).toLocaleDateString(); یک رشته تاریخ قالب‌بندی شده را از ورودی date معین بدون ذخیره آن در وضعیت مؤلفه استخراج می‌کند. با ایجاد formattedDate به‌عنوان یک ثابت، هر بار که فراخوانی می‌شود، مقدار آن را محاسبه می‌کند و وضعیت فعلی date را منعکس می‌کند.

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

این کار اجزای شما را تمیز نگه می دارد و از به روز رسانی های غیر ضروری حالت جلوگیری می کند.

محاسبه مقادیر بدون تأثیر

استفاده از useEffect را برای محاسبات ساده متوقف کنید! 🛑 اگر ارزش شما مستقیماً از حالت یا props قابل محاسبه است و عوارض جانبی ندارد، این کار را در حین رندر انجام دهید. برای محاسبات گران قیمت، آنها را در useMemo بپیچید تا عملکرد را بهینه کنید:

 const expensiveValue = useMemo( () => computeExpensiveValue(data), [data]);This reduces the complexity of your code and keeps your components focused.

کد const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]); از قلاب useMemo برای محاسبه یک مقدار ( expensiveValue ) بر اساس ورودی data بدون ایجاد عوارض جانبی استفاده می کند.

نتیجه حاصل از computeExpensiveValue(data) را به خاطر می‌سپارد و فقط زمانی که data تغییر می‌کند دوباره آن را محاسبه می‌کند. این رویکرد از محاسبات مجدد غیر ضروری در هر رندر جلوگیری می کند و عملکرد را برای محاسبات گران قیمت افزایش می دهد.

با تکیه بر useMemo ، کامپوننت به طور کارآمد مقدار را بر اساس ویژگی‌ها یا وضعیت فعلی خود بدست می‌آورد و فرآیند رندر را کارآمد و بر آخرین داده‌ها متمرکز می‌کند.

کلیدها باید منحصر به فرد باشند

گناهکار به عنوان متهم: من قبلاً از شاخص های آرایه به عنوان کلید در فهرست ها استفاده کرده ام. 😅 اما آیا می دانستید که این می تواند منجر به باگ شود؟ React برای شناسایی موارد به کلیدهای منحصر به فرد متکی است و استفاده از مقادیر غیر منحصر به فرد می تواند همه چیز را به هم بزند.

با استفاده از crypto.randomUUID() شناسه‌های منحصربه‌فرد ایجاد کنید، اما مطمئن شوید که این کار را فقط زمانی انجام می‌دهید که وضعیت شما به‌روزرسانی می‌شود، نه در هر رندر. برای اشیا، اضافه کردن یک ویژگی id را در نظر بگیرید:

 const itemWithId = items.map( item => ({ ...item, id : generateUniqueId() }));

کد const itemWithId = items.map (item => ({ ...item, id: generateUniqueId() })); یک آرایه جدید به نام itemWithId ایجاد می کند که در آن هر آیتم در آرایه آیتم ها با یک شناسه منحصر به فرد گفت ه می شود.

عملگر spread ( ...item ) خصوصیات هر آیتم را کپی می کند، در حالی که generateUniqueId() یک شناسه جدید و منحصر به فرد تولید می کند. این تضمین می کند که هر آیتم دارای یک کلید مجزا است که برای اجزای React هنگام رندر کردن فهرست ها بسیار مهم است.

کلیدهای منحصربه‌فرد به React کمک می‌کنند تا به‌روزرسانی‌ها را به‌طور مؤثر مدیریت کند، تغییرات را شناسایی کند و با تمایز بین موارد مختلف فهرست، عملکرد رندر را بهینه کند.

وابستگی ها را رها نکنید

یکی از آپشن های بی‌رحمانه React: فراموش کردن وابستگی‌ها در useEffect می‌تواند منجر به بسته شدن قدیمی شود. 😱 برای مثال، اگر useEffect می‌کنید وابستگی‌های مورد نیاز را شامل نمی‌شود، ممکن است آنطور که انتظار داریم که به‌روزرسانی نشود.

همیشه آرایه های وابستگی خود را دوباره تحلیل کنید:

 useEffect( () => { // Effect logic}, [dependency]);

کد useEffect(() => { /* Effect logic */ }, [dependency]); یک عارضه جانبی را در کامپوننت React تعریف می کند که با تغییر dependency مشخص شده اجرا می شود. ضروری است که تمام وابستگی های مربوطه را در آرایه وابستگی لحاظ کنید تا اطمینان حاصل شود که اثر به درستی عمل می کند.

حذف وابستگی‌ها می‌تواند منجر به استفاده از مقادیر قدیمی یا نادرست در افکت شود، زیرا React ممکن است در صورت نیاز آن را دوباره اجرا نکند. گنجاندن همه وابستگی‌ها به حفظ همگام‌سازی بین وضعیت مؤلفه و اثر، اطمینان از رفتار قابل پیش‌بینی و جلوگیری از اشکالات احتمالی مربوط به به‌روزرسانی‌های از دست رفته کمک می‌کند.

اگر رابط کاربری شما به‌درستی به‌روزرسانی نمی‌شود، اغلب این مقصر است.

از useEffect Last استفاده کنید

در اینجا یک نکته حرفه ای وجود دارد: برای استفاده useEffect عجله نکنید. 🙅‍♂️ قدرتمند است اما در صورت استفاده بیش از حد می تواند منجر به کدهای نامرتب شود. چارچوب‌های React راه‌حل‌هایی برای مدیریت دقیق‌تر عوارض جانبی ارائه می‌کنند. برای واکشی داده‌ها، کتابخانه‌هایی مانند TanStack Query یا SWR را در نظر بگیرید که درخواست‌ها و حافظه پنهان را به طور موثر مدیریت می‌کنند و منجر به تجربه کاربری بهتری می‌شوند.

استراتژی های جایگزین:

به طور مستقیم مقادیر را استخراج کنید.

با کنترل کننده ها به رویدادها پاسخ دهید.

داده ها را روی سرور یا با کتابخانه های اختصاصی واکشی کنید.

نتیجه گیری

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

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

React Js یک کتابخانه عالی برای توسعه مدرن است که همه چیز را برای توسعه و بهینه سازی دارد

با تشکر برای خواندن، و کد نویسی مبارک! 🎉

من را در توییتر X: Prankur دنبال کنید

من را در LinkedIn دنبال کنید: Prankur's Linkedin

به نمونه کارها من در اینجا نگاه کنید: نمونه کارها Prankur

خبرکاو