From c7f0217efcd8e90218f01401000d2134fd1f4f70 Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Wed, 4 Oct 2023 01:01:43 +0330 Subject: [PATCH 1/3] End of translation --- .../queueing-a-series-of-state-updates.md | 185 +++++++++--------- 1 file changed, 92 insertions(+), 93 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index a63b7205b..f6b8b14fd 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -1,23 +1,23 @@ --- -title: Queueing a Series of State Updates +title: صف بندی مجموعه ای از بروزرسانی های State --- -Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. +مقداردهی یک متغیر state، باعث ارسال درخواست برای رندر شدن صفحه می‌شود. اما گاهی اوقات ممکن است بخواهید قبل از اینکه رندر بعدی را در صف قرار دهید چندین عملیات روی مقدار یک متغیر state انجام دهید. برای انجام این کار درک مفهوم بروزرسانی‌های دسته‌ای یک متغیر state به شما کمک خواهد کرد. - + -* What "batching" is and how React uses it to process multiple state updates -* How to apply several updates to the same state variable in a row +* مفهوم "دسته‌بندی" چیست و چطور ری‌اکت با استفاده از آن چندین بروزرسانی state را پردازش می‌کند +* چطور می‌توان چند بروزرسانی یک متغییر state را طی یک رندر انجام داد -## React batches state updates {/*react-batches-state-updates*/} +## بروزرسانی‌های دسته‌ای state در ری‌اکت {/*react-batches-state-updates*/} -You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times: +ممکن است انتظار داشته باشید که با کلیک بر روی دکمه "+3" شمارنده سه واحد افزایش یابد زیرا `setNumber(number + 1)` را سه بار فراخوانی می‌کند: @@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`: +با این حال، همانطور که ممکن است از بخش قبل به خاطر داشته باشید، [در هر رندر مقدار state ثابت است](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time)، بنابراین مقدار `number` همیشه در اولین رندرِ حاصل از اجرای کنترل رویداد کلیک `0` است، فارغ از این که چند بار `setNumber(1)` را فراخوانی کنید: ```js setNumber(0 + 1); @@ -55,21 +55,21 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls. +اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد. -This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table. +این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند. -This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated. +این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث خیلی سریع‌تر اجرا شدن برنامه‌ی ری‌اکت شما می‌گردد. همچنین از مواجه شدن با بروزرسانده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.ی‌های "نیمه کاره‌ی" گیج کنن -**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. +**ری‌اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته‌بندی نمی‌کند**--مدیریت هر رویداد به صورت جداگانه انجام می‌شود. مطمئن باشید ری‌اکت تنها زمانی دسته‌بندی را انجام می‌دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می‌کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند. -## Updating the same state multiple times before the next render {/*updating-the-same-state-multiple-times-before-the-next-render*/} +## انجام چند بروزرسانی روی یک state قبل از رندر بعدی {/*updating-the-same-state-multiple-times-before-the-next-render*/} -It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it. +این یک استفاده‌ی غیر معمول است، اما اگر می‌خواهید یک متغییر state را قبل از رندر بعدی، چند بار بروزرسانی کنید، به جای ارسال *مقدار بعدی state* مثل `setNumber(number + 1)`، می‌توانید *تابعی* را ارسال کنید تا مقدار بعدی state را بر اساس مقدار قبلی آن که در صف هست محاسبه کند، مثل `setNumber(n => n + 1)`. این راهی است تا به ری‌اکت بگوییم "با مقدار state کاری انجام بده" به جای آن که جایگزینش کنی. -Try incrementing the counter now: +حالا شمارنده را افزایش دهید: @@ -99,10 +99,10 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter: +در اینجا `n => n + 1` یک **تابع بروزرسانی** نامیده می‌شود. زمانی که شما آن را به یک تنظیم کننده‌ی state ارسال می‌کنید: -1. React queues this function to be processed after all the other code in the event handler has run. -2. During the next render, React goes through the queue and gives you the final updated state. +1. ری‌اکت این تابع را در صف قرار می‌دهد تا پس از اجرای سایر کدهای کنترل کننده‌ی رویداد پردازش شود. +2. در رندر بعدی ری‌اکت صف را تا اتنها پیمایش می‌کند و state آپدیت شده‌ی نهایی را به شما می‌دهد. ```js setNumber(n => n + 1); @@ -110,13 +110,13 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -Here's how React works through these lines of code while executing the event handler: +در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. -When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on: +زمانی که شما `useState` را فراخوانی می‌کنید، در رندر بعدی، ری‌اکت به صف مراجعه می‌کند. مقدار قبلی `number` برابر `0` است، پس این همان چیزی است که ری‌اکت به عنوان اولین مقدار به عنوان آرگومان `n` به تابع بروزرسانی ارسال می‌کند. سپس ری‌اکت مقدار بازگشتی از تابع بروزرسانی را دریافت می‌کند و آن را به عنوان آرگومان `n`به تابع بروزرسانی بعدی ارسال می‌کند، و به همین ترتیب تا اتنها ادامه می‌دهد: | queued update | `n` | returns | |--------------|---------|-----| @@ -124,12 +124,12 @@ When you call `useState` during the next render, React goes through the queue. T | `n => n + 1` | `1` | `1 + 1 = 2` | | `n => n + 1` | `2` | `2 + 1 = 3` | -React stores `3` as the final result and returns it from `useState`. +ری‌اکت `3` را به عنوان مقدار نهایی ذخیره می‌کند و آن را از `useState` برمی‌گرداند. -This is why clicking "+3" in the above example correctly increments the value by 3. -### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/} +به همین دلیل است که کلیک کردن روی دکمه‌ی "+3" در مثال بالا مقدار را به درستی 3 واحد افزایش می‌دهد. +### چه اتفاقی خواهد افتاد اگر state را بعد از جایگزینی بروزرسانی کنید {/*what-happens-if-you-update-state-after-replacing-it*/} -What about this event handler? What do you think `number` will be in the next render? +در مورد کنترل کننده‌ی زیر چطور؟ به نظر شما در رندر بعدی `number` چه مقداری خواهد داشت؟ ```js - + ); } @@ -322,7 +321,7 @@ function delay(ms) { -Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions: +در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید: @@ -341,17 +340,17 @@ export default function RequestTracker() { } return ( - <> +

- Pending: {pending} + در انتظار: {pending}

- Completed: {completed} + کامل شده: {completed}

- +
); } @@ -364,23 +363,23 @@ function delay(ms) { -This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click. +این تضمین می‌کند که وقتی یک شمارنده را افزایش یا کاهش می‌دهید، این کار را در رابطه با آخرین مقدار state آن انجام دهید، نه مقداری که در زمان کلیک داشته است. -#### Implement the state queue yourself {/*implement-the-state-queue-yourself*/} +#### صف state را خودتان پیاده‌سازی کنید {/*implement-the-state-queue-yourself*/} -In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds. +در این چالش، بخش کوچکی از ری‌اکت را دوباره از ابتدا پیاده‌سازی خواهید کرد! آنقدر‌ها هم که به نظر می‌رسد سخت نیست. -Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass. +اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. -You will receive two arguments: `baseState` is the initial state (like `0`), and the `queue` is an array which contains a mix of numbers (like `5`) and updater functions (like `n => n + 1`) in the order they were added. +شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه‌ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده‌اند. -Your task is to return the final state, just like the tables on this page show! +کار شما این است که state نهایی را برگردانید، درست مانند جداولی که قبل‌تر در این صفحه دیدید! -If you're feeling stuck, start with this code structure: +اگر احساس می‌کنید گیر کردید، با ساختار زیر شروع کنید: ```js export function getFinalState(baseState, queue) { @@ -398,7 +397,7 @@ export function getFinalState(baseState, queue) { } ``` -Fill out the missing lines! +کد‌های از قلم افتاده را شما بنویسید! @@ -470,23 +469,23 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( - <> -

Base state: {baseState}

-

Queue: [{queue.join(', ')}]

-

Expected result: {expected}

+
+

مقدار اولیه state: {baseState}

+

صف: [{queue.join(', ')}]

+

نتیجه‌ی مورد انتظار: {expected}

- Your result: {actual} + نتیجه‌ی کار شما: {actual} {' '} ({actual === expected ? - 'correct' : - 'wrong' + 'صحیح' : + 'اشتباه' })

- +
); } ``` @@ -495,7 +494,7 @@ function TestCase({ -This is the exact algorithm described on this page that React uses to calculate the final state: +این همان الگوریتم دقیقی است که در این صفحه توضیح داده شد و ری‌اکت برای محاسبه‌ی مقدار نهایی state از آن استفاده می‌کند: @@ -573,30 +572,30 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( - <> -

Base state: {baseState}

-

Queue: [{queue.join(', ')}]

-

Expected result: {expected}

+
+

مقدار اولیه state: {baseState}

+

صف: [{queue.join(', ')}]

+

نتیجه‌ی مورد انتظار: {expected}

- Your result: {actual} + نتیجه‌ی کار شما: {actual} {' '} ({actual === expected ? - 'correct' : - 'wrong' + 'صحیح' : + 'اشتباه' })

- +
); } ``` -Now you know how this part of React works! +اکنون می‌دانید که این بخش از ری‌اکت چطور کار می‌کند! From cf44f0eb4d147827300cf416eb6fd093b017f381 Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Wed, 4 Oct 2023 01:28:19 +0330 Subject: [PATCH 2/3] Remove div tags and text translations in the code --- .../queueing-a-series-of-state-updates.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index f6b8b14fd..e061663c5 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -296,17 +296,17 @@ export default function RequestTracker() { } return ( -
+ <>

- در انتظار: {pending} + Pending: {pending}

- کامل شده: {completed} + Completed: {completed}

-
+ ); } @@ -340,17 +340,17 @@ export default function RequestTracker() { } return ( -
+ <>

- در انتظار: {pending} + Pending: {pending}

- کامل شده: {completed} + Completed: {completed}

-
+ ); } @@ -469,10 +469,10 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( -
-

مقدار اولیه state: {baseState}

-

صف: [{queue.join(', ')}]

-

نتیجه‌ی مورد انتظار: {expected}

+ <> +

Base state: {baseState}

+

Queue: [{queue.join(', ')}]

+

Expected result: {expected}

{actual} {' '} ({actual === expected ? - 'صحیح' : - 'اشتباه' + 'correct' : + 'wrong' })

-
+ ); } ``` @@ -573,19 +573,19 @@ function TestCase({ const actual = getFinalState(baseState, queue); return (
-

مقدار اولیه state: {baseState}

-

صف: [{queue.join(', ')}]

-

نتیجه‌ی مورد انتظار: {expected}

+

Base state: {baseState}

+

Queue: [{queue.join(', ')}]

+

Expected result: {expected}

- نتیجه‌ی کار شما: {actual} + Expected result: {actual} {' '} ({actual === expected ? - 'صحیح' : - 'اشتباه' + 'correct' : + 'wrong' })

From 2b4491a9532b0fd28ed5443896bc139bcea3a85b Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Sun, 8 Oct 2023 16:02:17 +0330 Subject: [PATCH 3/3] correct some mistakes. --- .../learn/queueing-a-series-of-state-updates.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index e061663c5..3a96526eb 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -57,11 +57,11 @@ setNumber(0 + 1); اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد. -این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند. +این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کنند. -این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث خیلی سریع‌تر اجرا شدن برنامه‌ی ری‌اکت شما می‌گردد. همچنین از مواجه شدن با بروزرسانده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.ی‌های "نیمه کاره‌ی" گیج کنن +این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث می‌شود برنامه‌ی ری‌اکت شما خیلی سریع‌تر اجرا شود. همچنین از مواجه شدن با بروزرسانی‌های "نیمه کاره‌ی" گیج کننده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند. **ری‌اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته‌بندی نمی‌کند**--مدیریت هر رویداد به صورت جداگانه انجام می‌شود. مطمئن باشید ری‌اکت تنها زمانی دسته‌بندی را انجام می‌دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می‌کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند. @@ -110,7 +110,7 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: +در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد که در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: 1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. 1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. @@ -321,7 +321,7 @@ function delay(ms) { -در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید: +در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص، از توابع بروزرسانی استفاده کنید: @@ -371,7 +371,7 @@ function delay(ms) { در این چالش، بخش کوچکی از ری‌اکت را دوباره از ابتدا پیاده‌سازی خواهید کرد! آنقدر‌ها هم که به نظر می‌رسد سخت نیست. -اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. +اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هر یک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه‌ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده‌اند. @@ -478,7 +478,7 @@ function TestCase({ 'green' : 'red' }}> - نتیجه‌ی کار شما: {actual} + Your result: {actual} {' '} ({actual === expected ? 'correct' : @@ -581,7 +581,7 @@ function TestCase({ 'green' : 'red' }}> - Expected result: {actual} + Your result: {actual} {' '} ({actual === expected ? 'correct' :