Skip to content

Commit

Permalink
changes done - April 30
Browse files Browse the repository at this point in the history
  • Loading branch information
seven-deuce authored Apr 29, 2019
1 parent 906ff3b commit 04e68b3
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ next: hooks-faq.html
- [`useLayoutEffect`](#uselayouteffect)
- [`useDebugValue`](#usedebugvalue)

## هوک‌های اولیه {#basic-hooks}
## هوک‌های پایه‌ای {#basic-hooks}

### `useState` {#usestate}

Expand Down Expand Up @@ -70,12 +70,12 @@ function Counter({initialCount}) {
}
```

دکمه‌های “+” و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همیشه متغیر را به آن مقداری که در ابتدا برایش تعریف شده بود باز میگرداند.
دکمه‌های “+” و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همیشه متغیر را به مقدار اولیه باز می گرداند.


> Note
> توجه
>
> هنگامی‌که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState` استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState` این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
> در کامپوننت‌هایی که به شکل کلاس تعریف می شدند، می توانستید با استفاده از متدsetState متغیر به‌روز‌ رسانی شده را با آبجکت پیشین state ادغام کنید. اماuseState به آن شکل کار نمی کند. اگر قصد دارید که کاری مثل آن بکنید، باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجامش دهید:
>
> ```js
> setState(prevState => {
Expand Down Expand Up @@ -153,7 +153,7 @@ useEffect(() => {

اما این در بعضی از موارد ممکن است باعث افراط بی مورد شود. مثال قبلی که در مورد ایجاد اشتراک (subscription) بود را به خاطر بیاورید. ما نیاز نداریم که در هر به‌روز‌ رسانی، یک اشتراک جدید بسازیم. مگر آنکه `props.source` تغییر کرده باشند.

بدین منظور، آرگومان دومی‌ را به `useEffect` بدهید. این آرگومان یک آرایه (array) خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
بدین منظور، آرگومان دومی‌ را به `useEffect` بدهید. این آرگومان یک آرایه خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:


```js
Expand Down Expand Up @@ -325,9 +325,9 @@ const memoizedCallback = useCallback(
);
```

یک کال بک مموایز شده ([memoized](https://en.wikipedia.org/wiki/Memoization) callback) را باز می‌گرداند.
یک ([memoized](https://en.wikipedia.org/wiki/Memoization) callback) را باز می‌گرداند.

یک کال بک اینلاین و آرایه ای از وابستگی‌ها را به آن بدهید. `useCallback` نسخه ی مموایز شده ای از کال بک را به شما باز خواهد گرداند. این نسخه فقط زمانی تغییر خواهد کرد که یکی از وابستگی‌هایش تغییر کند. این در چه مواقعی به درد می‌خورد؟ زمانی که می‌خواهیم کال بک‌ها را به کامپوننت‌های سطح پایینی بدهیم که بهینه شده اند. این کامپوننت‌ها با تکیه بر "برابری و تطبیق متغیر با مرجعش" از رندر‌های بی مورد جلوگیری می‌کنند (به طور مثال: `shouldComponentUpdate`).
یک کال بک درخط (inline) و آرایه ای از وابستگی‌ها را به آن بدهید. `useCallback` نسخه ی مموایز شده ای از کال بک را به شما باز خواهد گرداند. این نسخه فقط زمانی تغییر خواهد کرد که یکی از وابستگی‌هایش تغییر کند. این در چه مواقعی به درد می‌خورد؟ زمانی که می‌خواهیم کال بک‌ها را به کامپوننت‌های سطح پایینی بدهیم که بهینه شده اند. این کامپوننت‌ها با تکیه بر "برابری و تطبیق متغیر با مرجعش" از رندر‌های بی مورد جلوگیری می‌کنند (به طور مثال: `shouldComponentUpdate`).

هر دو کدی که در زیر می‌بینید، کار یکسانی را انجام می‌دهند:

Expand Down

0 comments on commit 04e68b3

Please sign in to comment.