Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Soroush Torkzadeh <soroush.torkzadeh@gmail.com>
  • Loading branch information
hosseinAMD and sorousht authored Oct 11, 2020
1 parent 24151d5 commit f480827
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions content/docs/handling-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ redirect_from:
- "docs/events-ko-KR.html"
---

مدیریت رویدادها(Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:
مدیریت رویدادها (Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:

* رویدادهای ری‌اکت به جای حروف کوچک از نامگذاری camelCase استفاده می‌کنند.
* با JSX، به جای یک رشته متنی یک تابع به عنوان event handler پاس می‌دهید.
Expand Down Expand Up @@ -54,9 +54,9 @@ function ActionLink() {
}
```

اینجا، `e` یک رویداد مصنوعی است. ری‌اکت این رویدادهای مصنوعی را بر اساس [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) تعریف می‌کند، بنابراین نیازی نیست نگران سازگاری مرورگرهای مختلف باشید. رویدادهای ری‌اکت دقیقا شبیه به رویدادهای محلی کار نمی‌کنند. مرجع راهنمای [`SyntheticEvent`](/docs/events.html) را برای یادگیری بیشتر ببینید.
اینجا، `e` یک رویداد مصنوعی (synthetic) است. ری‌اکت این رویدادهای مصنوعی را بر اساس [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) تعریف می‌کند، بنابراین نیازی نیست نگران سازگاری مرورگرهای مختلف باشید. رویدادهای ری‌اکت دقیقا شبیه به رویدادهای محلی کار نمی‌کنند. مرجع راهنمای [`SyntheticEvent`](/docs/events.html) را برای یادگیری بیشتر ببینید.

هنگام استفاده از ری‌اکت، عموما شما نیازی به فراخوانی `addEventListener` برای اضافه کردن listener ها به یک المنت DOM پس از ایجاد آن ندارید. به جای آن، فقط یم listener زمان رندر اولیه المنت فراهم کنید.
هنگام استفاده از ری‌اکت، عموما شما نیازی به فراخوانی `addEventListener` برای اضافه کردن listener ها به یک المنت DOM پس از ایجاد آن ندارید. به جای آن، فقط یک listener زمان رندر اولیه المنت فراهم کنید.

زمانی که شما با استفاده از [کلاس‌های ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) یک کامپوننت تعریف می‌کنید، یک متد روی کلاس بودن یک الگوی رایج برای یک event handler است. برای مثال، این کامپوننت `Toggle` یک کلید که به کاربر اجازه تغییر state به "ON" و "OFF" می‌دهد را رندر می‌کند.

Expand Down Expand Up @@ -93,7 +93,7 @@ ReactDOM.render(

[**این را روی CodePen امتحان کنید**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)

شما باید در مورد معنی `this` در JSX callbacks دقت کنید. در جاوااسکریپت، متدهای کلاس به صورت پیش‌فرض [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) نیستند. اگر شما bind کردن `this.handleClick` را فراموش کنید و آن را به `onClick` پاس دهید، `this` زمانی که تابع واقعا فراخوانی می‌شود `undefined` خواهد بود.
شما باید در مورد معنی `this` در JSX callbacks دقت کنید. در جاوااسکریپت، متدهای کلاس به صورت پیش‌فرض [bind](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) نیستند. اگر شما bind کردن `this.handleClick` را فراموش کنید و آن را به `onClick` پاس دهید، `this` زمانی که تابع واقعا فراخوانی می‌شود `undefined` خواهد بود.

این رفتار مختص به ری‌اکت نیست. این جزئی از [چگونگی کارکرد توابع در جاوااسکریپت](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) است. عموما، اگر شما بدون `()` بعد از آن به یک تابع اشاره کنید، مانند `onClick={this.handleClick}`، شما باید آن متد را bind کنید.

Expand Down Expand Up @@ -138,7 +138,7 @@ class LoggingButton extends React.Component {
}
```

مشکل این قاعده این است که با هر بار رندر شدن `LoggingButton` یک callback متفاوت ایجاد می‌شود. در بیشتر موارد، این مشکلی ندارد. به هر حال، اگر این callback به عنوان یک prop به کامپوننت‌های پایین‌تر ارسال شود، آن کامپوننت‌ها ممکن است رندرهای اضافه را تجربه کنند. ما عموما bind کردن در سازنده(constructor) یا استفاده از قاعده فیلدهای کلاس را برای جلوگیری از بروز مشکلات پرفورمنسی پیشنهاد می‌کنیم.
مشکل این قاعده این است که با هر بار رندر شدن `LoggingButton` یک callback متفاوت ایجاد می‌شود. در بیشتر موارد، این مشکلی ندارد. به هر حال، اگر این callback به عنوان یک prop به کامپوننت‌های پایین‌تر ارسال شود، آن کامپوننت‌ها ممکن است رندرهای اضافه را تجربه کنند. ما عموما bind کردن در سازنده (constructor) یا استفاده از قاعده فیلدهای کلاس را برای جلوگیری از بروز مشکلات عملکرد پیشنهاد می‌کنیم.

## پاس دادن آرگومان‌ها به Event Handlers ها {#passing-arguments-to-event-handlers}

Expand Down

0 comments on commit f480827

Please sign in to comment.