You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/queueing-a-series-of-state-updates.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -57,11 +57,11 @@ setNumber(0 + 1);
57
57
58
58
اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد.
59
59
60
-
این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند.
60
+
این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کنند.
61
61
62
62
<Illustrationsrc="/images/docs/illustrations/i_react-batching.png"alt="An elegant cursor at a restaurant places and order multiple times with React, playing the part of the waiter. After she calls setState() multiple times, the waiter writes down the last one she requested as her final order." />
63
63
64
-
این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث خیلی سریع‌تر اجرا شدن برنامه‌ی ری‌اکت شما می‌گردد. همچنین از مواجه شدن با بروزرسانده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.ی‌های "نیمه کاره‌ی" گیج کنن
64
+
این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث می‌شود برنامه‌ی ری‌اکت شما خیلی سریع‌تر اجرا شود. همچنین از مواجه شدن با بروزرسانی‌های "نیمه کاره‌ی" گیج کننده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.
65
65
66
66
**ری‌اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته‌بندی نمی‌کند**--مدیریت هر رویداد به صورت جداگانه انجام می‌شود. مطمئن باشید ری‌اکت تنها زمانی دسته‌بندی را انجام می‌دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می‌کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند.
67
67
@@ -110,7 +110,7 @@ setNumber(n => n + 1);
110
110
setNumber(n=> n +1);
111
111
```
112
112
113
-
در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است:
113
+
در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد که در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است:
114
114
115
115
1.`setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند.
116
116
1.`setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند.
@@ -321,7 +321,7 @@ function delay(ms) {
321
321
322
322
<Solution>
323
323
324
-
در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید:
324
+
در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص، از توابع بروزرسانی استفاده کنید:
325
325
326
326
<Sandpack>
327
327
@@ -371,7 +371,7 @@ function delay(ms) {
371
371
372
372
در این چالش، بخش کوچکی از ری‌اکت را دوباره از ابتدا پیاده‌سازی خواهید کرد! آنقدر‌ها هم که به نظر می‌رسد سخت نیست.
373
373
374
-
اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد.
374
+
اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هر یک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد.
375
375
376
376
شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه‌ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده‌اند.
0 commit comments