مقدمه
خطاها در برنامه نویسی اجتناب ناپذیر هستند اما می توان از آن جلوگیری کرد یا مدیریت کرد. در صورت مواجهه با درک صحیح از شیوه های کد نویسی خوب ، اشکالات را می توان به راحتی شناسایی کرد.
یکی از جنبه هایی که اغلب خطاها در هنگام استفاده از آن بوجود می آیند useEffect هوک ، به طور معمول به دلیل اشتباهات برخی از توسعه دهندگان.
در این مقاله ، من به طور خلاصه در مورد چه چیزی بحث خواهم کرد useEffect مستلزم ، اشتباهات رایج و بهترین شیوه ها ، و چه زمانی استفاده از useEffect قلاب
شما باید با React آشنا باشید و useEffect قلاب قبل از خواندن این مقاله. این که آیا شما تازه با قلاب های React شروع کرده اید یا مدتی از آنها استفاده کرده اید ، این مقاله برای شما مناسب است.
UseEffect چیست؟useEffect(function () { }, []);
useEffect قلاب است که به ما امکان می دهد یک اثر جانبی را کنترل کنیم.
به معنای واقعی کلمه ، عوارض جانبی شامل تعامل بین یک مؤلفه React و جهان خارج از مؤلفه است.
به عنوان مثال ، واکشی داده ها از سرور به مؤلفه شما یک عارضه جانبی است زیرا تعامل بین سرور و مؤلفه React وجود دارد. در useEffect هوک به عنوان ارتباط بین این دو عمل می کند و به ما امکان می دهد عوارض جانبی را به طور کارآمد مدیریت کنیم.
این یک قلاب عالی است که به جلوگیری از تغییر مجدد بی نهایت کمک می کند ، اطمینان حاصل می شود که داده ها پس از نصب مؤلفه ، یک بار از بین می روند.
تعریف اصطلاحات کلیدی
-
آرایه وابستگی (
[]): این یک آرایه خالی است که تضمین می کند که داده های واکشی فقط زمانی اجرا می شوند که مؤلفه برای اولین بار ارائه شود. حلقه های بی نهایت با استفاده از آرایه وابستگی متوقف می شوند. - تابع پاکسازی: در React ، یک عملکرد پاکسازی به مدیریت عوارض جانبی به طور مؤثر کمک می کند. عملکرد پاکسازی یک حالت/عنصر را به حالت قبلی خود بازنشانی می کند و به توسعه دهندگان این امکان را می دهد تا منابعی مانند لغو درخواست های API ، پاکسازی تایمر یا حذف شنوندگان رویداد را تمیز کنند. این مانع از تداوم برخی اقدامات خاص و عملکرد بهینه می شود.
5 اشتباه رایج
1آرایه وابستگی از دست رفته:
بدون آرایه وابستگی ، داده ها پس از هر رندر دوباره به دست می آیند. درخواست های HTTP در هر رندر به سرور ارسال می شود و باعث ایجاد یک حلقه بی نهایت می شود.
نمونه
Import {useEffect} from 'react';
function App(){
//Incorrect
useEffect(function () {
//Your Logic here })
//Correct
useEffect(function () {
//Your Logic here }, [])
return Hey Effects
;
}
export default App;
2خصوصیات نادرست یا گمشده در آرایه وابستگی:
اگر در آرایه وابستگی گنجانده نشود ، React از هیچ متغیر حالت یا غنی که در داخل اثر استفاده می شود آگاه نیست. این می تواند منجر به اشکالی به نام شود “بسته شدن بی نظیر”بشر
بسته شدن: بسته شدن بی نظیر هنگامی اتفاق می افتد که یک عملکرد به جای جدیدترین موارد ، مقادیر قدیمی را از کد اطراف خود به یاد می آورد. تصور کنید که React را به یاد می آورید که حالت اولیه یا غرفه ها را به یاد می آورید اما نتوانستید به روزرسانی ها را پس از تغییر هر حالت تشخیص دهید.
نمونه
//Incorrect
import { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
//Your logic here
}, []);
return ;
}
//correct
import { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
//Your logic here
}, [count]);
return ;
}
3استفاده بیش از حد:
نوشتن منطق بیش از حد در یک واحد useEffect یک عمل بد است
علاوه بر این ، useEffect هوک هدف خاص خود را در React دارد. با استفاده از useEffect برای اقداماتی که می توان به صورت دستی یا با سایر قلاب ها انجام شد ، یک عمل بد محسوب می شود.
استفاده بیش از حد از آن می تواند عملکرد را تخریب کند ، باعث ایجاد مشکلات در هنگام پاکسازی شود و اشکالات غیر ضروری را معرفی کند که شناسایی آن دشوار است.
نمونه
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
const [count, setCount] = useState(0);
// Incorrect
useEffect(() => {
// Fetching data
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
// Setting up a timer
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
// Cleanup function
return () => clearInterval(timer);
}, []);
return { data and count}
;
}
//Correct
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
const [count, setCount] = useState(0);
// Fetching data
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
// Setting up a timer
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return {data and count }
;
}
4تمیز کردن اثرات:
عوارض جانبی (به عنوان مثال ، واکشی داده ها از API) می تواند پس از ارائه مجدد یا عدم استفاده از مؤلفه ، همچنان ادامه یابد و باعث ایجاد مشکلات عملکردی مانند نشت حافظه یا واکشی داده های غیر ضروری شود.
//Incorrect
import { useState, useEffect } from 'react';
function App() {
[count,setCount] = useState(0);
// Setting up a timer
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
}, []);
return { data and count
}
;
}
//Correct
import { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
//Clean-up function
return () => clearInterval(timer);
}, []);
return {data and count}
;
}
5ذخیره استفاده در یک متغیر:
ذخیره useEffect عملکرد در یک متغیر می تواند منجر به از بین رفتن اجرای اثر و بسته شدن بی ثبات شود.
اگر عملکرد جلوه را در یک متغیر ذخیره کنید بدون اینکه آن را داخل آن فراخوانی کنید useEffect، عوارض جانبی اجرا نمی شود و منجر به رفتار ناخواسته در مؤلفه شما می شود.
نمونه
import { useEffect } from 'react';
function App() {
// Incorrect
const effectData = function () {
//Your logic here
};
useEffect(effectData
, []);
return Data...
;
}
//Correct
import { useEffect } from 'react';
function App() {
useEffect(function () {
//Your Logic here
}, []);
return Data..
;
}
بهترین روشها
- همیشه آرایه وابستگی را اضافه کنید تا از حلقه های بی نهایت جلوگیری شود.
- حالت یا غرفه هایی را که در حال حاضر از آن استفاده می کنید ، به آرایه وابستگی اضافه کنید تا از بسته شدن محکم جلوگیری کنید.
- از نوشتن منطق بیش از حد در یک کاربرد واحد خودداری کنید. برای حفظ شیوه های خوب از چندین قلاب استفاده کنید.
- برای هدف مورد نظر خود از قلاب استفاده از HOOK استفاده کنید مانند تنظیم تایمر ، اشتراک ها ، داده های واکشی و غیره.
- اطمینان حاصل کنید که توابع را برای جلوگیری از نشت حافظه یا مشکلات مربوط به عملکرد ، تمیز کنید.
- توابع Useeffect یا Effect را در یک متغیر ذخیره نکنید.
افکار نهایی
توجه به این اشتباهات و پیروی از شیوه های خوب در هنگام کدگذاری ، از خطاهای غیر ضروری که می تواند بهره وری را به تاخیر بیاندازد ، جلوگیری می کند.
در این مقاله اشتباهات رایج در استفاده و بهترین شیوه های آن مورد بررسی قرار گرفته است.
امیدوارم مقاله را روشنگری پیدا کنید.
آیا جدا از موارد ذکر شده در بالا با اشتباهاتی روبرو شده اید؟ آنها را در جعبه نظر رها کنید!
