از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
اگر با React کار می‌کردید، می‌دانید که این یک کتابخانه قدرتمند جاوا اسکریپت برای ساخت رابط کاربری است. اما گاهی اوقات لازم است از کلیک اصلی فراتر رفته و رویدادها را تغییر دهید. اینجاست که شنوندگان رویداد وارد بازی می شوند. این بایت برای توسعه‌دهندگانی ایده‌آل است که با React آشنا هستند و می‌خواهند عمیق‌تر به نحوه کار شنوندگان رویداد و نحوه مدیریت مؤثر آنها بپردازند.
شنوندگان رویداد در React
قبل از شروع، مهم است که بدانیم شنوندگان رویداد چه هستند. در جاوا اسکریپت، شنوندگان رویداد، توابعی هستند که هنگام وقوع یک رویداد مشخص، فراخوانی می شوند. این رویدادها می تواند هر چیزی باشد، از کلیک کردن روی یک دکمه، فشار دادن یک کلید تا تغییر اندازه یک پنجره.
React که یک کتابخانه جاوا اسکریپت است، همچنین از شنوندگان رویداد برای مدیریت تعاملات کاربر استفاده می کند. با این حال، برخلاف وانیلی جاوا اسکریپت، React رویداد بومی را در یک می پیچد SyntheticEvent. این یک رابط بین مرورگر را برای رویداد بومی فراهم می‌کند و اطمینان می‌دهد که رویداد در همه مرورگرها به‌طور مداوم رفتار می‌کند.
در اینجا یک مثال ساده از شنونده رویداد در React آورده شده است:
const MyComponent = () => {
const handleClick = () => {
console.log('Button clicked!');
};
return (
<button onClick={handleClick}>
Click Me
</button>
);
};
در این مثال، handleClick یک شنونده رویداد است که “دکمه کلیک شد!” هنگامی که دکمه کلیک می شود به کنسول. این عملاً شنونده رویدادی است <button> جزء.
چرا شنونده رویداد اضافه یا حذف شود؟
پس چرا ما نمی‌توانیم شنونده رویداد را متصل بگذاریم؟
خب دلیلش دو چیزه اول، اضافه کردن و حذف شنوندگان رویداد در صورت نیاز می تواند عملکرد برنامه شما را به میزان قابل توجهی بهبود بخشد. شنوندگان رویداد می توانند از نظر حافظه و قدرت پردازش بسیار گران باشند، به خصوص اگر تعداد زیادی از آنها داشته باشید.
دوم، حذف شنوندگان رویداد زمانی که دیگر مورد نیاز نیستند می تواند به جلوگیری از نشت حافظه کمک کند. هنگامی که یک برنامه به استفاده از حافظه ای که دیگر نیازی ندارد ادامه دهد، نشت حافظه ممکن است رخ دهد. با گذشت زمان، این نشت ها می توانند باعث کند شدن برنامه شما یا حتی از کار افتادن آن شوند.
نحوه افزودن/حذف شنونده رویداد
اکنون که کمی پیش زمینه مدیریت شنوندگان رویداد داریم، بیایید ببینیم چگونه آنها را در React اضافه و حذف کنیم.
افزودن شنونده رویداد
برای افزودن شنونده رویداد، فقط باید رویداد و تابعی را که باید هنگام وقوع رویداد فراخوانی شود، مشخص کنید. این به طور معمول در انجام می شود render روش کامپوننت شما، مانند این:
const MyForm = () => {
handleSubmit = () => {
console.log('Form submitted!');
}
render() {
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
}
در اینجا، ما یک شنونده رویداد برای آن اضافه می کنیم submit رویداد. را handleSubmit هر زمان که دکمه کلیک شود، تابع فراخوانی می شود.
حذف شنونده رویداد
در این بخش، شنوندگان رویداد را به گونه‌ای متفاوت اضافه یا حذف می‌کنیم تا نکته و راه‌های دیگر انجام این کار را بهتر نشان دهیم.
در این کامپوننت، شنونده رویداد را با اضافه می کنیم addEventListener وقتی با استفاده از آن نصب می شود useEffect. همانطور که چرخه عمر کامپوننت پیشرفت می کند و در حال جدا شدن است، می توانیم شنونده رویداد را با برگرداندن یک تابع از useEffect که حذف با removeEventListener.
import React, { useEffect } from 'react';
const MyComponent = () => {
const handleClick = () => {
console.log('Button clicked!');
};
useEffect(() => {
// Equivalent to componentDidMount
document.addEventListener('click', handleClick);
// Equivalent to componentWillUnmount
return () => {
document.removeEventListener('click', handleClick);
};
}, ());
return (
<button>
Click Me
</button>
);
};
اگرچه این لزوماً روش توصیه‌شده برای افزودن کنترل‌کننده‌های کلیک به یک مؤلفه نیست، اما نشان می‌دهد که چرخه حیات برای یک مؤلفه چگونه کار می‌کند و چگونه از آن چرخه حیات برای افزودن یا حذف شنوندگان خود استفاده می‌کنیم.
توجه داشته باشید: مهم است که اطمینان حاصل شود که تابع به removeEventListener همان تابعی است که به آن منتقل شد addEventListener. اگر تابع دیگری را ارسال کنید، شنونده رویداد حذف نخواهد شد.
مسائل بالقوه و راه حل های آنها
هنگام کار با شنوندگان رویداد در React، ممکن است با برخی از مشکلات رایج روبرو شوید. بیایید چند مورد را مرور کنیم و در مورد چگونگی حل آنها بحث کنیم.
1. this تعریف نشده است: این مشکل به دلیل قوانین جاوا اسکریپت در اطراف است this. در جاوا اسکریپت، this در داخل یک رویداد کنترل کننده به هدف رویداد اشاره می کند، نه نمونه کلاس، که بسیاری از توسعه دهندگان را تحت تاثیر قرار می دهد. برای رفع این مشکل، باید باند کنید this به مسئول رویداد این را می توان در سازنده انجام داد:
class MyButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('Button has been clicked!');
}
render() {
return (
<button onClick={this.handleClick}>
Click me!
</button>
);
}
}
2. شنونده رویداد حذف نشده است: اگر فراموش کنید شنونده رویداد را حذف کنید، ممکن است منجر به نشت حافظه و خطا شود. همیشه به یاد داشته باشید که شنوندگان رویداد جهانی را در قسمت حذف کنید useEffect روش چرخه عمر، یا componentWillUnmount برای اجزای سبک قدیمی
3. شنونده رویداد چندین بار اضافه شده است: اگر هر بار که یک مؤلفه به‌روزرسانی می‌شود، شنونده رویداد اضافه شود، می‌تواند منجر به رفتار غیرمنتظره شود. برای جلوگیری از این امر، شنوندگان رویداد را در قسمت اضافه کنید useEffect روش بدون متغیرهای حالت یا in componentDidMount برای قطعات قدیمی زمانی که کامپوننت برای اولین بار به DOM اضافه می شود، اینها فقط یک بار فراخوانی می شوند.
استفاده از useEffect Hook برای مدیریت شنونده رویداد
بیایید یک نگاه سریع دیگر به آن بیندازیم useEffect قلاب، که ابزار قدرتمندی است که به ما امکان می دهد عوارض جانبی را در اجزای خود مدیریت کنیم. عوارض جانبی می تواند هر چیزی باشد که با خارج از مؤلفه تعامل داشته باشد، مانند واکشی داده ها، تایمرها و البته شنوندگان رویداد.
برای افزودن شنونده رویداد با استفاده از useEffect، ابتدا تابعی را که هنگام وقوع رویداد فراخوانی می شود، اعلام می کنیم. سپس، در داخل useEffect، شنونده رویداد را اضافه می کنیم و تابع پاکسازی را برمی گردانیم که شنونده رویداد را حذف می کند. این شکلی است که در کد به نظر می رسد:
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
function handleResize() {
console.log(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, ());
return <div>Resize the window and check the console!</div>;
}
در این کد، handleResize هر زمان که اندازه پنجره تغییر می کند، عرض داخلی پنجره را ثبت می کند. شنونده رویداد هنگام سوار شدن مؤلفه اضافه می‌شود و به لطف آن، هنگام جدا شدن از آن حذف می‌شود useEffectعملکرد پاکسازی
از موارد برای افزودن/حذف شنوندگان رویداد استفاده کنید
سناریوهای زیادی وجود دارد که ممکن است لازم باشد شنوندگان رویداد را در برنامه React اضافه یا حذف کنید. به عنوان مثال، ممکن است بخواهید یک شنونده رویداد “کلیک” را به یک دکمه اضافه کنید تا هنگام تعامل کاربر با آن، یک عمل خاص را فعال کند. یا، ممکن است بخواهید به رویداد “تغییر اندازه” در شی پنجره گوش دهید تا به صورت پویا طرح‌بندی برنامه خود را بر اساس اندازه ویوپورت تنظیم کنید.
یکی دیگر از موارد استفاده رایج گوش دادن به رویدادهای صفحه کلید است. برای مثال، ممکن است بخواهید رویداد “keydown” را برای پیاده سازی میانبرهای صفحه کلید در برنامه خود ثبت کنید. در اینجا یک مثال ساده در این مسیر آورده شده است:
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
function handleKeyDown(event) {
if (event.key === 'Enter') {
console.log('Enter key pressed!');
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, ());
return <div>Press the Enter key and check the console!</div>;
}
در اینجا ما یک شنونده رویداد برای رویداد “keydown” اضافه کرده ایم. وقتی کاربر دکمه را فشار می دهد وارد کلید، یک پیام به کنسول وارد می شود.
نتیجه
در این بایت، نحوه افزودن و حذف شنوندگان رویداد در برنامه React را بررسی کرده‌ایم. ما یاد گرفتیم که React است useEffect hook ابزاری قدرتمند برای مدیریت شنوندگان رویداد است که به ما امکان می‌دهد هنگام نصب یک مؤلفه، آنها را اضافه کنیم و در صورت جدا شدن از آن حذف کنیم. ما همچنین به برخی از موارد استفاده متداول برای افزودن و حذف شنوندگان رویداد، مانند پاسخ دادن به تعامل کاربر یا تغییر در اندازه نمایش، نگاه کرده‌ایم.
منتشر شده در 1402-12-26 09:27:04
