Skip to content

Commit 2b4491a

Browse files
correct some mistakes.
1 parent cf44f0e commit 2b4491a

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/learn/queueing-a-series-of-state-updates.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@ setNumber(0 + 1);
5757

5858
اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد.
5959

60-
این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند.
60+
این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کنند.
6161

6262
<Illustration src="/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." />
6363

64-
این به شما این امکان را می&zwnj;دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می&zwnj;شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته&zwnj;بندی** نیز شناخته می&zwnj;شود، باعث خیلی سریع&zwnj;تر اجرا شدن برنامه&zwnj;ی ری&zwnj;اکت شما می&zwnj;گردد. همچنین از مواجه شدن با بروزرسانده که در آن&zwnj;ها فقط برخی متغییر&zwnj;ها بروزرسانی می&zwnj;شوند جلوگیری می&zwnj;کند.ی&zwnj;های "نیمه کاره&zwnj;ی" گیج کنن
64+
این به شما این امکان را می&zwnj;دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می&zwnj;شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته&zwnj;بندی** نیز شناخته می&zwnj;شود، باعث می&zwnj;شود برنامه&zwnj;ی ری&zwnj;اکت شما خیلی سریع&zwnj;تر اجرا شود. همچنین از مواجه شدن با بروزرسانی&zwnj;های "نیمه کاره&zwnj;ی" گیج کننده که در آن&zwnj;ها فقط برخی متغییر&zwnj;ها بروزرسانی می&zwnj;شوند جلوگیری می&zwnj;کند.
6565

6666
**ری&zwnj;اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته&zwnj;بندی نمی&zwnj;کند**--مدیریت هر رویداد به صورت جداگانه انجام می&zwnj;شود. مطمئن باشید ری&zwnj;اکت تنها زمانی دسته&zwnj;بندی را انجام می&zwnj;دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می&zwnj;کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند.
6767

@@ -110,7 +110,7 @@ setNumber(n => n + 1);
110110
setNumber(n => n + 1);
111111
```
112112

113-
در اینجا نحوه&zwnj;ی عملکرد ری&zwnj;اکت، هنگام پیمایش این خطوط کد در کنترل کننده&zwnj;ی رویداد اجرا می&zwnj;شوند آمده است:
113+
در اینجا نحوه&zwnj;ی عملکرد ری&zwnj;اکت، هنگام پیمایش این خطوط کد که در کنترل کننده&zwnj;ی رویداد اجرا می&zwnj;شوند آمده است:
114114

115115
1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری&zwnj;اکت آن را به یک صف اضافه می&zwnj;کند.
116116
1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری&zwnj;اکت آن را به یک صف اضافه می&zwnj;کند.
@@ -321,7 +321,7 @@ function delay(ms) {
321321

322322
<Solution>
323323

324-
در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می&zwnj;خواهید شمارنده&zwnj;ها را *زیاد* یا *کم* کنید، هنگام کلیک می&zwnj;توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید:
324+
در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می&zwnj;خواهید شمارنده&zwnj;ها را *زیاد* یا *کم* کنید، هنگام کلیک می&zwnj;توانید به جای بروزرسانی متغییر state با مقدار مشخص، از توابع بروزرسانی استفاده کنید:
325325

326326
<Sandpack>
327327

@@ -371,7 +371,7 @@ function delay(ms) {
371371

372372
در این چالش، بخش کوچکی از ری&zwnj;اکت را دوباره از ابتدا پیاده&zwnj;سازی خواهید کرد! آنقدر&zwnj;ها هم که به نظر می&zwnj;رسد سخت نیست.
373373

374-
اگر به قسمت ویرایشگر کد که کمی پایین&zwnj;تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن&zwnj;ها با مثال&zwnj;هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده&zwnj;سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه&zwnj;ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد.
374+
اگر به قسمت ویرایشگر کد که کمی پایین&zwnj;تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن&zwnj;ها با مثال&zwnj;هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده&zwnj;سازی کنید که مقدار بازگشت داده شده برای هر یک از موارد تست منجر به نتیجه&zwnj;ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد.
375375

376376
شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه&zwnj;ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده&zwnj;اند.
377377

@@ -478,7 +478,7 @@ function TestCase({
478478
'green' :
479479
'red'
480480
}}>
481-
نتیجه&zwnj;ی کار شما: <b>{actual}</b>
481+
Your result: <b>{actual}</b>
482482
{' '}
483483
({actual === expected ?
484484
'correct' :
@@ -581,7 +581,7 @@ function TestCase({
581581
'green' :
582582
'red'
583583
}}>
584-
Expected result: <b>{actual}</b>
584+
Your result: <b>{actual}</b>
585585
{' '}
586586
({actual === expected ?
587587
'correct' :

0 commit comments

Comments
 (0)