مدیریت رویداد برای درک چگونگی پردازش رویدادهای مرورگر و به روز رسانی DOM توسط React ضروری است. به‌عنوان یک توسعه‌دهنده React، داشتن این مهارت بسیار مهم است، زیرا مدیریت مؤثر تعاملات کاربر در برنامه‌های وب را امکان‌پذیر می‌سازد.

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

ما همچنین الگوهای رایج رسیدگی به رویدادها و بهترین شیوه‌ها را پوشش خواهیم داد تا اطمینان حاصل کنیم که برنامه‌های کاربردی شما کارآمد هستند و نگهداری آنها آسان است.

اصول اولیه مدیریت رویداد در React

مدیریت رویداد در React با چند اصل اساسی هدایت می شود که با معماری مبتنی بر کامپوننت آن همخوانی دارد. این اصول عبارتند از:

سیستم رویداد مصنوعی

قراردادهای نامگذاری

عبور از کنترل کننده های رویداد به عنوان ابزار

تابع درون خطی و روش های جزء

React از یک سیستم رویداد مصنوعی استفاده می‌کند که تضمین می‌کند رویدادها به طور مداوم در مرورگرهای مختلف رفتار می‌کنند. این سیستم رویداد بومی را در مرورگرها پیچیده می‌کند و یک API یکپارچه را بدون توجه به مرورگری که React در آن اجرا می‌کند، ارائه می‌کند.

قراردادهای نامگذاری حول مجموعه ای از نامگذاری ثابت است که توسعه دهندگان برای شناسایی رویدادها و عملکردهای کنترل کننده در یک نگاه استفاده می کنند. هر رویدادی از یک قرارداد نامگذاری camelCase استفاده می کند، و تابع handler که اجرا می کند با پیشوند "handle" و به دنبال آن نام رویداد قرار می گیرد. به عنوان مثال، یک رویداد onClick که یک تابع handleClick را اجرا می کند.

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

در کامپوننت‌های React، رویدادها معمولاً توابع درون خطی یا توابع مستقل را در کامپوننت اجرا می‌کنند. با این کار، می توانید از قلاب هایی مانند useState برای حالت و useCallback برای به خاطر سپردن توابع کنترل کننده استفاده کنید. این به مدیریت تغییرات حالت و بهینه سازی عملکرد کمک می کند.

نحوه ایجاد کنترل کننده رویداد در کامپوننت های React

ایجاد یک رویداد در React با پیوست کردن نام رویداد به عنصری که آن را فعال می‌کند، با تابع handler که در آن ارجاع داده می‌شود، شروع می‌شود:

 <button onClick={handleClick}> Click me </button>

آنچه در زیر می آید این است که تابع کنترل کننده را تعریف کنیم، زیرا این تابعی است که هنگام راه اندازی رویداد اجرا می شود:

 const handleClick = () => { alert('You clicked me'); };

این کد کاملی است که به فایل page.jsx یک استارتر Next.js وارد شده است:

 'use client'; const Counter = () => { const handleClick = () => { alert('You clicked me!'); }; return ( <div className="p-10 flex items-center"> <button onClick={handleClick} className="bg-green-400 px-4 py-2 rounded mx-auto" > Click me </button> </div> ); }; export default Counter;

و این چیزی است که با کلیک روی دکمه در مرورگر نشان داده می شود:

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

 <button onClick={() => alert('You clicked me!')}> Click me </button>

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

 'use client'; import { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); return ( <div className="flex items-center justify-center space-x-8 p-10"> <button onClick={() => setCount(count - 1)} className="bg-red-500 hover:bg-red-600 text-white font-bold px-4 py-2 rounded " > Decrement </button> <p className="text-4xl font-semibold text-gray-800">{count}</p> <button onClick={() => setCount(count + 1)} className="bg-green-500 hover:bg-green-600 text-white font-bold px-4 py-2 rounded " > Increment </button> </div> ); }; export default Counter;

onChange و onSubmt دیگر رویدادهای محبوب در React هستند. onChange در عناصر input و onSubmit در یک عنصر form استفاده می شود.

در اینجا نمونه ای از رویداد onChange آمده است:

 'use client'; import { useState } from 'react'; const MyInput = () => { const [inputValue, setInputValue] = useState(''); const handleChange = (e) => { setInputValue(e.target.value); }; return ( <div> <input type="text" value={inputValue} onChange={handleChange} className="border border-green-400 p-2 rounded shadow" placeholder="Type something..." /> <p className="mt-4 text-green-400">You typed: {inputValue}</p> </div> ); }; export default MyInput;

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

نمونه‌های دیگر رویدادها عبارتند از رویدادهای صفحه‌کلید مانند onKeyDown ، onKeyPress ، و onKeyUp ، رویدادهای ماوس مانند onMouseUp ، onMouseDown ، onMouseEnter onDrag و موارد دیگر. هر رویداد محبوب در جاوا اسکریپت در React موجود است. تنها تفاوت این است که رویدادها در camelCase در React نوشته می شوند.

نحوه انتقال آرگومان ها به مدیریت کننده رویداد

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

برای انجام این کار، تابع handler باید یک پارامتر را در نظر بگیرد:

 const handleClick = (item) => { console.log('Button click for:', item); };

سپس یک آرگومان مربوط به آن پارامتر را به تابع ناشناس رویداد ارسال می کنید:

 <button onClick={() => handleClick(item)}>Click Me</button>

در اینجا یک نمونه مدیریت حذف کار در یک مؤلفه TaskManager آورده شده است:

 'use client'; import { useState } from 'react'; const TaskManager = () => { const [tasks, setTasks] = useState([ { id: 1, text: 'Read an article' }, { id: 2, text: 'Read a book' }, { id: 3, text: 'Write an article' }, { id: 4, text: 'Code' }, ]); // Function takes aa taskId parameter const deleteTask = (taskId) => { setTasks((currentTasks) => currentTasks.filter((task) => task.id !== taskId) ); console.log('Deleted task with ID:', taskId); }; return ( <div className="p-5 max-w-md mx-auto bg-gray-100 rounded-lg shadow"> <ul className="list-none space-y-2"> {tasks.map((task) => ( <li key={task.id} className="flex justify-between items-center bg-white p-3 rounded shadow-sm" > {task.text} <button // onClick event takes a task.id argument to account for the taskId parameter of the function onClick={() => deleteTask(task.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded" > Delete </button> </li> ))} </ul> </div> ); }; export default TaskManager;

الگوهای رایج مدیریت رویداد در React

الگوهای مدیریت رویداد به تکنیک هایی برای مدیریت تعاملات کاربر در اجزای React اشاره دارد.

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

اتصال دهنده های رویداد با useCallback برای به خاطر سپردن کنترل کننده

کنترل‌کننده‌های رویداد با پارامترها (این مورد را در بخش نحوه ارسال آرگومان‌ها به کنترل‌کننده‌های رویداد مشاهده کرده‌اید)

رسیدگی به رویداد مشروط

هیئت رویداد

حباب رویداد

مدیریت بهینه برای فهرست ها

توابع پیکان درون خطی (توابع ناشناس که به کنترل کننده رویداد منتقل می کنید)

در اینجا مثالی با استفاده از useCallback برای جلوگیری از ایجاد یک تابع جدید در هر رندر آورده شده است:

 'use client'; import { useCallback } from 'react'; function HandlerComponent() { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); return ( <button onClick={handleClick}> Click Me </button> ); } export default HandlerComponent;

و در اینجا یک مثال از مدیریت رویداد شرطی است:

 'use client'; import { useState } from 'react'; function CheckLogin() { const [isLoggedIn, setLoggedIn] = useState(false); const toggleLogin = () => { setLoggedIn(!isLoggedIn); }; const handleLogin = () => { if (isLoggedIn) { console.log('User is logged in'); } else { console.log('User is logged out'); } }; return ( <div> <h2 className="text-3xl text-center mb-4"> {isLoggedIn ? 'User is logged in' : 'User is not logged in'} </h2> <button onClick={handleLogin} className="bg-green-400 hover:bg-green-500 px-2 py-3 rounded mr-3" > Check Login </button> <button onClick={toggleLogin} className="bg-green-400 hover:bg-green-500 px-2 py-3 rounded" > {isLoggedIn ? 'Log Out' : 'Log In'} </button> </div> ); } export default CheckLogin;

چگونه از رفتار پیش‌فرض مرورگر در رویداد Handler جلوگیری کنیم

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

برای جلوگیری از به‌روزرسانی مرورگر هنگام ارسال فرم، یا جلوگیری از هرگونه رفتار پیش‌فرض دیگری، پارامتر event را به تابعی که رویداد onSubmit را مدیریت می‌کند، ارسال کنید، سپس از آن event برای فراخوانی یک تابع preventDefault استفاده کنید.

 const handleSubmit = (event) => { // prevent the default behavior event.preventDefault(); }; return ( // reference the function in onSubmit <form onSubmit={handleSubmit}> <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Enter something..." /> <button type="submit">Submit</button> </form> );

بهترین روش ها برای مدیریت کارآمد رویداد در React

در اینجا مهمترین قوانین مربوط به مدیریت رویداد در React آمده است:

از استفاده از توابع پیکان ناشناس در درون رویدادها اجتناب کنید

استفاده مستقیم از توابع پیکان در رویدادها، مانند onClick={() => console.log('button clicked')}) راحت به نظر می رسد. نقطه ضعف این است که می تواند منجر به مشکلات عملکرد شود زیرا یک تابع جدید در هر رندر ایجاد می شود.

همیشه تابع handler را تعریف کنید تا زمانی که رویداد خارج از روش رندر اجرا می شود اجرا شود تا از این مشکلات عملکرد جلوگیری شود.

رویدادها را با استفاده از قلاب «Callback» به خاطر بسپارید

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

از رویداد Delegation استفاده کنید

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

در صورت لزوم از رفتار پیش فرض جلوگیری کنید

هنگامی که نیاز دارید مرورگر را از انجام اقدامات پیش‌فرض، مانند ارسال فرم، بازدارید، از event.preventDefault() در کنترل‌کننده‌های رویداد خود استفاده کنید. با این حال، باید از این روش با احتیاط استفاده کنید تا از مسدود کردن غیر ضروری رفتارهای مرورگر جلوگیری کنید.

شنوندگان رویداد را پاک کنید

اگر شنونده های رویداد خود را در useEffect تنظیم کرده اید، همیشه یک تابع پاکسازی را برای حذف شنونده رویداد برگردانید. در غیر این صورت باعث نشت حافظه می شود.

کنترل کننده رویداد تست

اطمینان حاصل کنید که کنترل کننده رویداد شما در تست های واحد و یکپارچه سازی شما پوشش داده شده است. چارچوب‌های آزمایشی مانند Jest در ترکیب با React Testing Library می‌تواند به تأیید اینکه کنترل‌کننده‌های رویداد شما مطابق انتظار عمل می‌کنند کمک کند.

نتیجه

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

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

علاوه بر این، با مزایای استفاده از useCallback برای بهینه‌سازی کنترل‌کننده‌های رویداد برای عملکرد کارآمد تحت تعاملات مختلف کاربر آشنا شدید.

با این بینش، باید بتوانید مدیریت رویداد را در پروژه های خود پیاده سازی کنید، پس می توانید عملکرد و تعامل کاربر را بهبود بخشید.

مهارت های React خود را به سطح بعدی برسانید

آیا می خواهید درباره مدیریت رویداد یا سایر مفاهیم React بیشتر بدانید؟ سپس به دوره React من در Udemy بپیوندید. من به شما نشان خواهم داد که چگونه با ساختن یک بازی 2048 به یک توسعه دهنده بهتر React تبدیل شوید. ساخت بازی ها یادگیری را سرگرم کننده تر و لذت بخش تر می کند.

پس همین حالا بپیوندید و سفر خود را برای تسلط بر React آغاز کنید!

خبرکاو