From 0e75710784baeb4f8b9ae83e9fef04387f609144 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Fri, 7 Feb 2020 17:04:12 +0330 Subject: [PATCH 01/37] Custom Hooks Translated --- content/docs/hooks-custom.md | 75 +++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index e8b8883a9..f38600160 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -6,11 +6,11 @@ next: hooks-reference.html prev: hooks-rules.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hookها* ضمیمه جدید ری‌اکت ۱۶.۸ هستند. آن‌ها به شما اجازه می‌دهند تا از state و سایر ویژگی‌های ری‌اکت بدون نوشتن کلاس استفاده کنید. -Building your own Hooks lets you extract component logic into reusable functions. +ساختن Hookهای خودتون به شما کمک می‌کنه تا منطق برنامه را به توابعی که می‌توان مجدد استفاده کرد تبدیل کنید. -When we were learning about [using the Effect Hook](/docs/hooks-effect.html#example-using-hooks-1), we saw this component from a chat application that displays a message indicating whether a friend is online or offline: +هنگامی که در حال آموختن استفاده از Effect Hook بودیم، کامپوننت زیر که به ما پیامی در خصوص وضعیت آنلاین بودن دوستمان را نشان می‌داد دیدیم: ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -36,7 +36,8 @@ function FriendStatus(props) { } ``` -Now let's say that our chat application also has a contact list, and we want to render names of online users with a green color. We could copy and paste similar logic above into our `FriendListItem` component but it wouldn't be ideal: +حالا بیاین بگیم که برنامه چت‌مان یک لیست مخاطب هم داشته باشد، ما هم می‌خواهیم لیست کاربران آنلاین را با رنگ سبز نشون بدیم. می‌توانیم این کار را با کپی کردن منطق مشابه بالا در کامپوننت `FriendListItem` انجام بدیم ولی ایده خوبی نیست: + ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -63,15 +64,15 @@ function FriendListItem(props) { } ``` -Instead, we'd like to share this logic between `FriendStatus` and `FriendListItem`. +به جای آن، میتوانیم این منطق رو بین `FriendStatus` و `FriendListItem` به اشتراک بگذاریم. -Traditionally in React, we've had two popular ways to share stateful logic between components: [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html). We will now look at how Hooks solve many of the same problems without forcing you to add more components to the tree. +به طور سنتی در ری‌اکت، دو روش برای اشتراک گذاشتن منطق بین کامپوننت‌ها داریم: [رندر کردن props](/docs/render-props.html) و [استفاده از کامپوننت‌های higher-order](/docs/higher-order-components.html). حالا به Hookها نگاه می‌کنیم که چطور بسیاری از این مشکلات مشابه‌ را بدون اینکه مجبور به اضافه کردن کامپوننت‌های بیشتر به درخت [فایل‌ها] بشیم برایمان حل می کنند. -## Extracting a Custom Hook {#extracting-a-custom-hook} +## خارج کردن Hookشخصی‌سازی شده {#extracting-a-custom-hook} -When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too! +در جاوااسکریپت هنگامی که می‌خواهیم منطقی را بین دو تابع به اشتراک بگذاریم، آن منطق را به عنوان تابع سومی خارج می‌کنیم. کامپوننت‌ها و Hookها هر دو تابع هستند، پس این کار برای آن‌ها هم عملیست. -**A custom Hook is a JavaScript function whose name starts with "`use`" and that may call other Hooks.** For example, `useFriendStatus` below is our first custom Hook: +**Hook تابع جاواسکریپتی‌ای هست که اول نامش با "`use`" شروع می‌شود و شاید Hookهای دیگری را فرخوانی کند** برای مثال، `useFriendStatus` اولین Hook شخصی‌سازی شده ماست: ```js{3} import React, { useState, useEffect } from 'react'; @@ -93,12 +94,11 @@ function useFriendStatus(friendID) { return isOnline; } ``` +چیز جدیدی درونش نیست -- منطق از کامپوننت بالایی کپی شده است. درست مثل کامپوننت، دقت کنید که Hookهای دیگر را بدون شرط در بالاترین سطح Hook شخصیتان فراخوانی کنید. -There's nothing new inside of it -- the logic is copied from the components above. Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. - -Unlike a React component, a custom Hook doesn't need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it's just like a normal function. Its name should always start with `use` so that you can tell at a glance that the [rules of Hooks](/docs/hooks-rules.html) apply to it. +برخلاف یک کامپوننت ری‌اکت، یک Hookشخصی نیازی ندارد تا با امضای خاصی مشخص شود. می‌توانیم تصمیم بگیریم که چه چیزی به عنوان آرگومان دریافت کند،و اگر چیزی هست که باید آن را برگرداند، برگرداند به عبارت دیگر، مانند تابعی معمولیست. نامش بهتر است که با `use` آغاز شود تا با یک نگاه بفهمید که [قوانین hookها](/docs/hooks-rules.html) روی آن اعمال شده است. -The purpose of our `useFriendStatus` Hook is to subscribe us to a friend's status. This is why it takes `friendID` as an argument, and returns whether this friend is online: +هدف Hook `useFriendStatus` آن است که اشتراک(subscribe) به وضعیت دوستان داشته باشد. به همین دلیل است که `friendID` را به عنوان آرگومان قبول می‌کند، و اگر دوستمان آنلاین باشد مقدارش را برمی‌گرداند: ```js function useFriendStatus(friendID) { @@ -110,13 +110,13 @@ function useFriendStatus(friendID) { } ``` -Now let's see how we can use our custom Hook. +حالا ببینیم که Hook ما چگونه کار می‌کند. -## Using a Custom Hook {#using-a-custom-hook} +## استفاده از Hook شخصی‌سازی شده {#using-a-custom-hook} -In the beginning, our stated goal was to remove the duplicated logic from the `FriendStatus` and `FriendListItem` components. Both of them want to know whether a friend is online. +در ابتدا، هدف اصلی ما این بود که منطق اضافی را از کامپوننت‌های `FriendStatus` و `FriendListItem` حذف کنیم. هر دوی آنها می‌خواهند بدانند که یک دوست انلاین هست یا خیر. -Now that we've extracted this logic to a `useFriendStatus` hook, we can *just use it:* +حالا که ما این منطق را به عنوان یک Hook `useFriendStatus` خارج کردیم، فقط باید استفاده‌اش کنیم. ```js{2} function FriendStatus(props) { @@ -141,19 +141,21 @@ function FriendListItem(props) { } ``` -**Is this code equivalent to the original examples?** Yes, it works in exactly the same way. If you look closely, you'll notice we didn't make any changes to the behavior. All we did was to extract some common code between two functions into a separate function. **Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature.** +**آیا این کد با مثال اصلی برابراست?** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **Hookهای شخصی‌سازی شده قراردیست که به طور ذاتی به جای اینکه یک ویژگیه ری‌اکتی باشد از طراحی Hookها پیروی می‌کند.** + +**آیا مجبورم که حتما نام Hook شخصی خودم را با “`use`” آغاز کنم?** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین Hookها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش Hookهایی را فراخوانی کرده باشد. + +**آیا دو کامپوننت که از Hook یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند?** خیر. hookهای شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از Hook شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. -**Do I have to name my custom Hooks starting with “`use`”?** Please do. This convention is very important. Without it, we wouldn't be able to automatically check for violations of [rules of Hooks](/docs/hooks-rules.html) because we couldn't tell if a certain function contains calls to Hooks inside of it. +**چگونه یک Hook شخصی state ایزوله می‌گیرد?** هر *فراخوانی* Hook یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند.و همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. -**Do two components using the same Hook share state?** No. Custom Hooks are a mechanism to reuse *stateful logic* (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. +### نکته: انتقال اطلاعات بین Hookها {#tip-pass-information-between-hooks} -**How does a custom Hook get isolated state?** Each *call* to a Hook gets isolated state. Because we call `useFriendStatus` directly, from React's point of view our component just calls `useState` and `useEffect`. And as we [learned](/docs/hooks-state.html#tip-using-multiple-state-variables) [earlier](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), we can call `useState` and `useEffect` many times in one component, and they will be completely independent. +از آنجایی که Hookها تابع هستند، می‌توانیم بین آنها اطلاعات رد و بدل کنیم. -### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks} -Since Hooks are functions, we can pass information between them. -To illustrate this, we'll use another component from our hypothetical chat example. This is a chat message recipient picker that displays whether the currently selected friend is online: +برای نشان دادن این‌کار ، از کامپوننت دیگری در مثال فرضی چت‌مان استفاده می‌کنیم. این گیرنده پذیرش پیام است که آنلاین بودن دوست انتخاب شده را به‌ ما نشان می‌دهد: ```js{8-9,13} const friendList = [ @@ -184,24 +186,26 @@ function ChatRecipientPicker() { } ``` -We keep the currently chosen friend ID in the `recipientID` state variable, and update it if the user chooses a different friend in the `` انتخاب کند آن را به‌روز رسانی می‌کنیم. -Because the `useState` Hook call gives us the latest value of the `recipientID` state variable, we can pass it to our custom `useFriendStatus` Hook as an argument: +به دلیل اینکه فراخوانی Hook `useState` به ما مقدار آخرین متغییر state `recipientID` را می‌دهد، می‌توانیم آن را به Hook شخصی `useFriendStatus` به عنوان آرگومان انتقال انتقال دهیم: ```js const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID); ``` -This lets us know whether the *currently selected* friend is online. If we pick a different friend and update the `recipientID` state variable, our `useFriendStatus` Hook will unsubscribe from the previously selected friend, and subscribe to the status of the newly selected one. +این کار به ما اجازه می‌دهد تا بدانیم *دوست انتخابی* آنلاین هست یا خیر. اگر دوست دیگری انتخاب کنیم و مقدار `recipientID` را به‌روز رسانی کنیم، Hook `useFriendStatus`مان اشتراک دوستی که در قبل انتخاب کردیم را از بین می‌برد و به دوست جدیدی که انتخاب کردیم اشتراک می‌زند. -## `useYourImagination()` {#useyourimagination} +## `useتخیلتان()` {#useyourimagination} -Custom Hooks offer the flexibility of sharing logic that wasn't possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. What's more, you can build Hooks that are just as easy to use as React's built-in features. +Hookهای شخصی سازی شده راهکاری برای اشتراک گذاشتن منطق پیشنهاد می‌دهند که قبلا در کامپوننت‌های ری‌اکت امکان پذیر نبود. شما می توانید Hookهای شخصی‌سازی شده ای بنویسید که محدوده بزرگی از موارد استفاده مانند کنترل کردن، انیمیشن، پیاده سازی مشترکین، تایمر، و شاید خیلی از موارد دیگر که به آن اشاره نکردیم را پوشش دهد. چیز بیشتر اینکه، می‌توانید hookهایی بنویسید که همانند ویژگی‌های درونی ری‌اکت به راحتی قابل استفاده باشند. -Try to resist adding abstraction too early. Now that function components can do more, it's likely that the average function component in your codebase will become longer. This is normal -- don't feel like you *have to* immediately split it into Hooks. But we also encourage you to start spotting cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. -For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so you might prefer to write it as a [Redux](https://redux.js.org/) reducer: + +سعی کنید در قبال اینکه خیلی زود انتضاع اضافه کنید مقاومت کنید. حالا که آن کامپوننت تابعی کار بیشتری می‌تواند انجام دهد، این احتمال وجود دارد که میانگین مؤلفه عملکرد در پایه کد شما طولانی تر شود. این طبیعیست-- این احساس را نداشته باشید که *مجبورید* آن را فورا به Hook تقسیم کنید. ولی ما توصیه می‌کنیم مواردی را شروع کنید که هوک سفارشی می تواند منطق پیچیده را در پشت یک رابط ساده پنهان کند، یا به حل کردن یک کامپوننت درهم تنیده و کثیف کمک کند. + +برای مثال، شاید کامپوننت پیچیده‌ای داشته باشید که شامل state های محلی زیادی باشد که به صورت موقت اداره می‌شود. `useState` به روزرسانی متمرکز منطق را راحتتر نمی‌کند شاید ترجیح دهید که از کاهش دهنده [ری‌داکس](https://redux.js.org/) استفاده کنید: ```js function todosReducer(state, action) { @@ -218,9 +222,10 @@ function todosReducer(state, action) { } ``` -Reducers are very convenient to test in isolation, and scale to express complex update logic. You can further break them apart into smaller reducers if necessary. However, you might also enjoy the benefits of using React local state, or might not want to install another library. +کاهش دهنده‌ها آزمودن در فضای ایزوله و تشریح به‌روز رسانی‌های پیچیده را راحت‌تر می‌کنند، شما می‌توانید بعدا در صورت نیاز آنها به قسمت‌های کوچکتری تقسیم کنید. ولی شاید هم بخواهید از state محلی ری‌اکت استفاده کنید، و نخواهید از کتاب خانه دیگری استفاده کنید. + +پس چی می‌شد اگر می‌توانستیم یک Hook `useReducer` بنویسیم که به ما اجازه مدیریت state *محلی* کامپوننت‌مان را با یک کاهش‌دهنده بدهد؟ یک ورژن ساده آن میتواند به شکل زیر باشد: -So what if we could write a `useReducer` Hook that lets us manage the *local* state of our component with a reducer? A simplified version of it might look like this: ```js function useReducer(reducer, initialState) { @@ -235,7 +240,7 @@ function useReducer(reducer, initialState) { } ``` -Now we could use it in our component, and let the reducer drive its state management: +حالا می‌توانیم از این در کامپوننت خودمان استفاده کنیم، و بگذاریم تا کاهش‌دهنده جریان state را مدیریت کند: ```js{2} function Todos() { @@ -249,4 +254,4 @@ function Todos() { } ``` -The need to manage local state with a reducer in a complex component is common enough that we've built the `useReducer` Hook right into React. You'll find it together with other built-in Hooks in the [Hooks API reference](/docs/hooks-reference.html). +نیاز مدیریت state محلی با کاهش‌دهنده در یک کامپوننت پیچیده به اندازه کافی عمومی بود که ما Hook `useReducer` را درون ری‌کت ساختیم. شما این و سایر Hook های درون ساخته شده را درکنار هم در صفحه [Hooks API reference](/docs/hooks-reference.html) پیدا می‌کنید. From bef21132fad65156ce39f072622f002480dd32c7 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:18:50 +0330 Subject: [PATCH 02/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index f38600160..40adf44ac 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -254,4 +254,4 @@ function Todos() { } ``` -نیاز مدیریت state محلی با کاهش‌دهنده در یک کامپوننت پیچیده به اندازه کافی عمومی بود که ما Hook `useReducer` را درون ری‌کت ساختیم. شما این و سایر Hook های درون ساخته شده را درکنار هم در صفحه [Hooks API reference](/docs/hooks-reference.html) پیدا می‌کنید. +نیاز مدیریت state محلی با کاهش‌دهنده در یک کامپوننت پیچیده به اندازه کافی عمومی بود که ما هوک `useReducer` را درون ری‌کت ساختیم. شما این [هوک] و دیگر هوک‌های ساخته شده در ری‌اکت را درکنار هم در صفحه [Hooks API reference](/docs/hooks-reference.html) پیدا می‌کنید. From 5240994923dac0ac0852cafbd212a492a5955912 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:01 +0330 Subject: [PATCH 03/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 40adf44ac..3c758d3fe 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -222,7 +222,7 @@ function todosReducer(state, action) { } ``` -کاهش دهنده‌ها آزمودن در فضای ایزوله و تشریح به‌روز رسانی‌های پیچیده را راحت‌تر می‌کنند، شما می‌توانید بعدا در صورت نیاز آنها به قسمت‌های کوچکتری تقسیم کنید. ولی شاید هم بخواهید از state محلی ری‌اکت استفاده کنید، و نخواهید از کتاب خانه دیگری استفاده کنید. +کاهش دهنده‌ها (reducers) برای تست در فضای ایزوله و در مقیاس بزرگ، برای به‌روز رسانی‌های پیچیده مناسب هستند. شما می‌توانید بعدا در صورت نیاز آنها به قسمت‌های کوچکتری تقسیم کنید. ولی شاید هم بخواهید از state محلی ری‌اکت استفاده کنید، و نخواهید از کتاب خانه دیگری استفاده کنید. پس چی می‌شد اگر می‌توانستیم یک Hook `useReducer` بنویسیم که به ما اجازه مدیریت state *محلی* کامپوننت‌مان را با یک کاهش‌دهنده بدهد؟ یک ورژن ساده آن میتواند به شکل زیر باشد: From f9ad433897c2d3d24d7378ea671454b86e64a841 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:08 +0330 Subject: [PATCH 04/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 3c758d3fe..8cfa507cd 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -224,7 +224,7 @@ function todosReducer(state, action) { کاهش دهنده‌ها (reducers) برای تست در فضای ایزوله و در مقیاس بزرگ، برای به‌روز رسانی‌های پیچیده مناسب هستند. شما می‌توانید بعدا در صورت نیاز آنها به قسمت‌های کوچکتری تقسیم کنید. ولی شاید هم بخواهید از state محلی ری‌اکت استفاده کنید، و نخواهید از کتاب خانه دیگری استفاده کنید. -پس چی می‌شد اگر می‌توانستیم یک Hook `useReducer` بنویسیم که به ما اجازه مدیریت state *محلی* کامپوننت‌مان را با یک کاهش‌دهنده بدهد؟ یک ورژن ساده آن میتواند به شکل زیر باشد: +پس اگر می‌توانستیم یک هوک `useReducer` بنویسیم که به ما اجازه مدیریت state *محلی* کامپوننت‌مان را با یک کاهش‌دهنده بدهد؟ یک نسخه ساده آن میتواند به شکل زیر باشد: ```js From 89fd5251f37c6e2e3a31c17e7362bb05c499180b Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:20 +0330 Subject: [PATCH 05/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 8cfa507cd..302949611 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -223,7 +223,6 @@ function todosReducer(state, action) { ``` کاهش دهنده‌ها (reducers) برای تست در فضای ایزوله و در مقیاس بزرگ، برای به‌روز رسانی‌های پیچیده مناسب هستند. شما می‌توانید بعدا در صورت نیاز آنها به قسمت‌های کوچکتری تقسیم کنید. ولی شاید هم بخواهید از state محلی ری‌اکت استفاده کنید، و نخواهید از کتاب خانه دیگری استفاده کنید. - پس اگر می‌توانستیم یک هوک `useReducer` بنویسیم که به ما اجازه مدیریت state *محلی* کامپوننت‌مان را با یک کاهش‌دهنده بدهد؟ یک نسخه ساده آن میتواند به شکل زیر باشد: From f98e6571000840c4cc44da6a87de562f99e73e01 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:27 +0330 Subject: [PATCH 06/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 302949611..e92978a54 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -205,7 +205,7 @@ Hookهای شخصی سازی شده راهکاری برای اشتراک گذا سعی کنید در قبال اینکه خیلی زود انتضاع اضافه کنید مقاومت کنید. حالا که آن کامپوننت تابعی کار بیشتری می‌تواند انجام دهد، این احتمال وجود دارد که میانگین مؤلفه عملکرد در پایه کد شما طولانی تر شود. این طبیعیست-- این احساس را نداشته باشید که *مجبورید* آن را فورا به Hook تقسیم کنید. ولی ما توصیه می‌کنیم مواردی را شروع کنید که هوک سفارشی می تواند منطق پیچیده را در پشت یک رابط ساده پنهان کند، یا به حل کردن یک کامپوننت درهم تنیده و کثیف کمک کند. -برای مثال، شاید کامپوننت پیچیده‌ای داشته باشید که شامل state های محلی زیادی باشد که به صورت موقت اداره می‌شود. `useState` به روزرسانی متمرکز منطق را راحتتر نمی‌کند شاید ترجیح دهید که از کاهش دهنده [ری‌داکس](https://redux.js.org/) استفاده کنید: +برای مثال، شاید کامپوننت پیچیده‌ای داشته باشید که شامل state های محلی زیادی باشد که به صورت موقت اداره می‌شود. `useState` به روزرسانی متمرکز منطق را راحتتر نمی‌کند شاید ترجیح دهید که از کاهش دهنده [ریداکس](https://redux.js.org/) استفاده کنید: ```js function todosReducer(state, action) { From 3a2d8c6363ab5cc4bbabafa31494afe15f4b3de5 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:32 +0330 Subject: [PATCH 07/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index e92978a54..21135aeac 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -حالا بیاین بگیم که برنامه چت‌مان یک لیست مخاطب هم داشته باشد، ما هم می‌خواهیم لیست کاربران آنلاین را با رنگ سبز نشون بدیم. می‌توانیم این کار را با کپی کردن منطق مشابه بالا در کامپوننت `FriendListItem` انجام بدیم ولی ایده خوبی نیست: +حالا در نظر بگیرید که برنامه گفتگوی ما یک لیست مخاطب هم داشته باشد، و ما هم می‌خواهیم لیست کاربران آنلاین را با رنگ سبز نشان بدهیم. می‌توانیم این کار را با کپی کردن منطق مشابه بالا در کامپوننت `FriendListItem` انجام بدهیم ولی ایده‌آل نخواهد بود: ```js{4-15} From 6dc8384437ec127dd5df7779f884e52e53356faa Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:40 +0330 Subject: [PATCH 08/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 21135aeac..e4cdb83bb 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -38,7 +38,6 @@ function FriendStatus(props) { حالا در نظر بگیرید که برنامه گفتگوی ما یک لیست مخاطب هم داشته باشد، و ما هم می‌خواهیم لیست کاربران آنلاین را با رنگ سبز نشان بدهیم. می‌توانیم این کار را با کپی کردن منطق مشابه بالا در کامپوننت `FriendListItem` انجام بدهیم ولی ایده‌آل نخواهد بود: - ```js{4-15} import React, { useState, useEffect } from 'react'; From 7b81e59860b72253b58a45ab0f8192ce02b9cfaf Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:48 +0330 Subject: [PATCH 09/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index e4cdb83bb..b8dd489e4 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -10,7 +10,7 @@ prev: hooks-rules.html ساختن Hookهای خودتون به شما کمک می‌کنه تا منطق برنامه را به توابعی که می‌توان مجدد استفاده کرد تبدیل کنید. -هنگامی که در حال آموختن استفاده از Effect Hook بودیم، کامپوننت زیر که به ما پیامی در خصوص وضعیت آنلاین بودن دوستمان را نشان می‌داد دیدیم: +هنگامی که در حال آموختن استفاده از هوک Effect بودیم، کامپوننت زیر از یک برنامه گفتگو را دیدیم که به ما پیامی مبنی بر وضعیت آنلاین بودن دوستمان، نشان می داد: ```js{4-15} import React, { useState, useEffect } from 'react'; From 2a6c7435e81a05a837b7415c7aadf54fb1bfe3cb Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:19:59 +0330 Subject: [PATCH 10/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index b8dd489e4..5136b9748 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -63,7 +63,7 @@ function FriendListItem(props) { } ``` -به جای آن، میتوانیم این منطق رو بین `FriendStatus` و `FriendListItem` به اشتراک بگذاریم. +به جای آن، می‌توانیم این منطق را بین `FriendStatus` و `FriendListItem` به اشتراک بگذاریم. به طور سنتی در ری‌اکت، دو روش برای اشتراک گذاشتن منطق بین کامپوننت‌ها داریم: [رندر کردن props](/docs/render-props.html) و [استفاده از کامپوننت‌های higher-order](/docs/higher-order-components.html). حالا به Hookها نگاه می‌کنیم که چطور بسیاری از این مشکلات مشابه‌ را بدون اینکه مجبور به اضافه کردن کامپوننت‌های بیشتر به درخت [فایل‌ها] بشیم برایمان حل می کنند. From 5984469a4d9f7d643eeaed587c211e26e1fdcee1 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:20:39 +0330 Subject: [PATCH 11/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 5136b9748..680d63e3e 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -6,7 +6,7 @@ next: hooks-reference.html prev: hooks-rules.html --- -*Hookها* ضمیمه جدید ری‌اکت ۱۶.۸ هستند. آن‌ها به شما اجازه می‌دهند تا از state و سایر ویژگی‌های ری‌اکت بدون نوشتن کلاس استفاده کنید. +*هوک‌ها* ضمیمه جدید ری‌اکت ۱۶.۸ هستند. آن‌ها به شما اجازه می‌دهند تا از state و سایر ویژگی‌های ری‌اکت بدون نوشتن کلاس استفاده کنید. ساختن Hookهای خودتون به شما کمک می‌کنه تا منطق برنامه را به توابعی که می‌توان مجدد استفاده کرد تبدیل کنید. From 18ab86cab51972c60c2429b64e636782290eceb8 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:20:53 +0330 Subject: [PATCH 12/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 680d63e3e..352a5b813 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -8,7 +8,7 @@ prev: hooks-rules.html *هوک‌ها* ضمیمه جدید ری‌اکت ۱۶.۸ هستند. آن‌ها به شما اجازه می‌دهند تا از state و سایر ویژگی‌های ری‌اکت بدون نوشتن کلاس استفاده کنید. -ساختن Hookهای خودتون به شما کمک می‌کنه تا منطق برنامه را به توابعی که می‌توان مجدد استفاده کرد تبدیل کنید. +ساختن هوک‌های خودتان به شما کمک می‌کند تا منطق برنامه را به توابعی که می‌توان مجدد استفاده کرد تبدیل کنید. هنگامی که در حال آموختن استفاده از هوک Effect بودیم، کامپوننت زیر از یک برنامه گفتگو را دیدیم که به ما پیامی مبنی بر وضعیت آنلاین بودن دوستمان، نشان می داد: From 73df53b59892bcc2e440f3d0ed6a671dca885519 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:21:02 +0330 Subject: [PATCH 13/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 352a5b813..ea4de7a9e 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -65,7 +65,7 @@ function FriendListItem(props) { به جای آن، می‌توانیم این منطق را بین `FriendStatus` و `FriendListItem` به اشتراک بگذاریم. -به طور سنتی در ری‌اکت، دو روش برای اشتراک گذاشتن منطق بین کامپوننت‌ها داریم: [رندر کردن props](/docs/render-props.html) و [استفاده از کامپوننت‌های higher-order](/docs/higher-order-components.html). حالا به Hookها نگاه می‌کنیم که چطور بسیاری از این مشکلات مشابه‌ را بدون اینکه مجبور به اضافه کردن کامپوننت‌های بیشتر به درخت [فایل‌ها] بشیم برایمان حل می کنند. +به طور سنتی در ری‌اکت، دو روش برای اشتراک گذاشتن منطق بین کامپوننت‌ها داریم: [رندر کردن props](/docs/render-props.html) و [استفاده از کامپوننت‌های مرتبه بالاتر](/docs/higher-order-components.html). حالا به هوک‌ها نگاه می‌کنیم که چطور بسیاری از این مشکلات مشابه‌ را بدون اینکه مجبور به اضافه کردن کامپوننت‌های بیشتر به درخت [فایل‌ها] بشیم برایمان حل می کنند. ## خارج کردن Hookشخصی‌سازی شده {#extracting-a-custom-hook} From 4a16327c84f98c1d1624b963301426009757dc70 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:21:17 +0330 Subject: [PATCH 14/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ea4de7a9e..7668badda 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -67,7 +67,7 @@ function FriendListItem(props) { به طور سنتی در ری‌اکت، دو روش برای اشتراک گذاشتن منطق بین کامپوننت‌ها داریم: [رندر کردن props](/docs/render-props.html) و [استفاده از کامپوننت‌های مرتبه بالاتر](/docs/higher-order-components.html). حالا به هوک‌ها نگاه می‌کنیم که چطور بسیاری از این مشکلات مشابه‌ را بدون اینکه مجبور به اضافه کردن کامپوننت‌های بیشتر به درخت [فایل‌ها] بشیم برایمان حل می کنند. -## خارج کردن Hookشخصی‌سازی شده {#extracting-a-custom-hook} +## استخراج یک هوک شخصی‌سازی شده {#extracting-a-custom-hook} در جاوااسکریپت هنگامی که می‌خواهیم منطقی را بین دو تابع به اشتراک بگذاریم، آن منطق را به عنوان تابع سومی خارج می‌کنیم. کامپوننت‌ها و Hookها هر دو تابع هستند، پس این کار برای آن‌ها هم عملیست. From 9bf5f35f3e3c94a05685d105dfc99a941a5f14e6 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:21:29 +0330 Subject: [PATCH 15/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 7668badda..dc38ad655 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -69,7 +69,7 @@ function FriendListItem(props) { ## استخراج یک هوک شخصی‌سازی شده {#extracting-a-custom-hook} -در جاوااسکریپت هنگامی که می‌خواهیم منطقی را بین دو تابع به اشتراک بگذاریم، آن منطق را به عنوان تابع سومی خارج می‌کنیم. کامپوننت‌ها و Hookها هر دو تابع هستند، پس این کار برای آن‌ها هم عملیست. +در جاوااسکریپت هنگامی که می‌خواهیم منطقی را بین دو تابع به اشتراک بگذاریم، آن منطق را به عنوان تابع سومی استخراج می‌کنیم. کامپوننت‌ها و هوک‌ها هر دو تابع هستند، پس این کار برای آن‌ها هم عملی است. **Hook تابع جاواسکریپتی‌ای هست که اول نامش با "`use`" شروع می‌شود و شاید Hookهای دیگری را فرخوانی کند** برای مثال، `useFriendStatus` اولین Hook شخصی‌سازی شده ماست: From dab910cefa0830cbcf7ae2fee7572c5979209485 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:21:40 +0330 Subject: [PATCH 16/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index dc38ad655..90a42f169 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -93,7 +93,7 @@ function useFriendStatus(friendID) { return isOnline; } ``` -چیز جدیدی درونش نیست -- منطق از کامپوننت بالایی کپی شده است. درست مثل کامپوننت، دقت کنید که Hookهای دیگر را بدون شرط در بالاترین سطح Hook شخصیتان فراخوانی کنید. +چیز جدیدی درونش نیست -- منطق از کامپوننت بالایی کپی شده است. درست مثل کامپوننت، دقت کنید که هوک‌های دیگر را بدون شرط در بالاترین سطح هوک شخصیتان فراخوانی کنید. برخلاف یک کامپوننت ری‌اکت، یک Hookشخصی نیازی ندارد تا با امضای خاصی مشخص شود. می‌توانیم تصمیم بگیریم که چه چیزی به عنوان آرگومان دریافت کند،و اگر چیزی هست که باید آن را برگرداند، برگرداند به عبارت دیگر، مانند تابعی معمولیست. نامش بهتر است که با `use` آغاز شود تا با یک نگاه بفهمید که [قوانین hookها](/docs/hooks-rules.html) روی آن اعمال شده است. From 2724dea113d368fe3f64a6bd6ddd16adc8699532 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:23:02 +0330 Subject: [PATCH 17/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 90a42f169..3bdee7d55 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -71,7 +71,7 @@ function FriendListItem(props) { در جاوااسکریپت هنگامی که می‌خواهیم منطقی را بین دو تابع به اشتراک بگذاریم، آن منطق را به عنوان تابع سومی استخراج می‌کنیم. کامپوننت‌ها و هوک‌ها هر دو تابع هستند، پس این کار برای آن‌ها هم عملی است. -**Hook تابع جاواسکریپتی‌ای هست که اول نامش با "`use`" شروع می‌شود و شاید Hookهای دیگری را فرخوانی کند** برای مثال، `useFriendStatus` اولین Hook شخصی‌سازی شده ماست: +**هوک تابع جاوااسکریپتی‌ای هست که اول نامش با "`use`" شروع می‌شود و شاید هوک‌های دیگری را فرخوانی کند.** برای مثال، `useFriendStatus` اولین هوک شخصی‌سازی شده‌ی ماست: ```js{3} import React, { useState, useEffect } from 'react'; From 12da091c8b71b2feee8efa27e57b8da9afd51ae3 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:23:13 +0330 Subject: [PATCH 18/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 3bdee7d55..abc43f188 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -95,7 +95,7 @@ function useFriendStatus(friendID) { ``` چیز جدیدی درونش نیست -- منطق از کامپوننت بالایی کپی شده است. درست مثل کامپوننت، دقت کنید که هوک‌های دیگر را بدون شرط در بالاترین سطح هوک شخصیتان فراخوانی کنید. -برخلاف یک کامپوننت ری‌اکت، یک Hookشخصی نیازی ندارد تا با امضای خاصی مشخص شود. می‌توانیم تصمیم بگیریم که چه چیزی به عنوان آرگومان دریافت کند،و اگر چیزی هست که باید آن را برگرداند، برگرداند به عبارت دیگر، مانند تابعی معمولیست. نامش بهتر است که با `use` آغاز شود تا با یک نگاه بفهمید که [قوانین hookها](/docs/hooks-rules.html) روی آن اعمال شده است. +برخلاف یک کامپوننت ری‌اکت، یک هوک شخصی‌سازی شده نیازی ندارد تا با تعریف (signature) خاصی مشخص شود. می‌توانیم تصمیم بگیریم که چه چیزی به عنوان آرگومان دریافت کند، و اگر چیزی هست که باید آن را برگرداند، بازگرداند. به عبارت دیگر، مانند تابعی معمولی است. نامش بهتر است که با `use` آغاز شود تا با یک نگاه بفهمید که [قوانین hookها](/docs/hooks-rules.html) روی آن اعمال شده است. هدف Hook `useFriendStatus` آن است که اشتراک(subscribe) به وضعیت دوستان داشته باشد. به همین دلیل است که `friendID` را به عنوان آرگومان قبول می‌کند، و اگر دوستمان آنلاین باشد مقدارش را برمی‌گرداند: From 364d549db8f0ec689b6edcc2e9eca48be5ef1cc5 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:23:28 +0330 Subject: [PATCH 19/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index abc43f188..773f27158 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -97,7 +97,7 @@ function useFriendStatus(friendID) { برخلاف یک کامپوننت ری‌اکت، یک هوک شخصی‌سازی شده نیازی ندارد تا با تعریف (signature) خاصی مشخص شود. می‌توانیم تصمیم بگیریم که چه چیزی به عنوان آرگومان دریافت کند، و اگر چیزی هست که باید آن را برگرداند، بازگرداند. به عبارت دیگر، مانند تابعی معمولی است. نامش بهتر است که با `use` آغاز شود تا با یک نگاه بفهمید که [قوانین hookها](/docs/hooks-rules.html) روی آن اعمال شده است. -هدف Hook `useFriendStatus` آن است که اشتراک(subscribe) به وضعیت دوستان داشته باشد. به همین دلیل است که `friendID` را به عنوان آرگومان قبول می‌کند، و اگر دوستمان آنلاین باشد مقدارش را برمی‌گرداند: +هدف هوک `useFriendStatus` آن است که به وضعیت یک دوست گوش کند (subscribe). به همین دلیل است که `friendID` را به عنوان آرگومان قبول می‌کند، و اگر دوستمان آنلاین باشد مقدارش را باز می‌گرداند: ```js function useFriendStatus(friendID) { From 0f8e41e2f9d5288435180749b6212ebca336af65 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:23:41 +0330 Subject: [PATCH 20/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 773f27158..77b70e51b 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -113,7 +113,7 @@ function useFriendStatus(friendID) { ## استفاده از Hook شخصی‌سازی شده {#using-a-custom-hook} -در ابتدا، هدف اصلی ما این بود که منطق اضافی را از کامپوننت‌های `FriendStatus` و `FriendListItem` حذف کنیم. هر دوی آنها می‌خواهند بدانند که یک دوست انلاین هست یا خیر. +در ابتدا، هدف اصلی ما این بود که منطق اضافی را از کامپوننت‌های `FriendStatus` و `FriendListItem` حذف کنیم. هر دوی آن‌ها می‌خواهند بدانند که یک دوست آنلاین هست یا خیر. حالا که ما این منطق را به عنوان یک Hook `useFriendStatus` خارج کردیم، فقط باید استفاده‌اش کنیم. From 761418f5834bbd780368fb5126543be2c202dcb2 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:23:54 +0330 Subject: [PATCH 21/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 77b70e51b..0ace5fdc9 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -140,7 +140,7 @@ function FriendListItem(props) { } ``` -**آیا این کد با مثال اصلی برابراست?** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **Hookهای شخصی‌سازی شده قراردیست که به طور ذاتی به جای اینکه یک ویژگیه ری‌اکتی باشد از طراحی Hookها پیروی می‌کند.** +**آیا این کد با مثال‌های اصلی معادل است؟** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **هوک‌های شخصی‌سازی شده قراردادیست که به طور ذاتی به جای اینکه یک ویژگی ری‌اکتی باشد از طراحی هوک‌ها پیروی می‌کند.** **آیا مجبورم که حتما نام Hook شخصی خودم را با “`use`” آغاز کنم?** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین Hookها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش Hookهایی را فراخوانی کرده باشد. From b1906fcaccab012ac306e7176eb23743521440c3 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:24:05 +0330 Subject: [PATCH 22/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 0ace5fdc9..f56e94fe6 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -142,7 +142,7 @@ function FriendListItem(props) { **آیا این کد با مثال‌های اصلی معادل است؟** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **هوک‌های شخصی‌سازی شده قراردادیست که به طور ذاتی به جای اینکه یک ویژگی ری‌اکتی باشد از طراحی هوک‌ها پیروی می‌کند.** -**آیا مجبورم که حتما نام Hook شخصی خودم را با “`use`” آغاز کنم?** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین Hookها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش Hookهایی را فراخوانی کرده باشد. +**آیا مجبورم که حتما نام هوک شخصی خودم را با “`use`” آغاز کنم؟** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین هوک‌ها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش هوک‌هایی را فراخوانی کرده باشد. **آیا دو کامپوننت که از Hook یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند?** خیر. hookهای شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از Hook شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. From 9007338f06cfa2f8f4a040e367d74bc3abee59d5 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:24:19 +0330 Subject: [PATCH 23/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index f56e94fe6..fd3677537 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -143,7 +143,6 @@ function FriendListItem(props) { **آیا این کد با مثال‌های اصلی معادل است؟** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **هوک‌های شخصی‌سازی شده قراردادیست که به طور ذاتی به جای اینکه یک ویژگی ری‌اکتی باشد از طراحی هوک‌ها پیروی می‌کند.** **آیا مجبورم که حتما نام هوک شخصی خودم را با “`use`” آغاز کنم؟** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین هوک‌ها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش هوک‌هایی را فراخوانی کرده باشد. - **آیا دو کامپوننت که از Hook یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند?** خیر. hookهای شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از Hook شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. **چگونه یک Hook شخصی state ایزوله می‌گیرد?** هر *فراخوانی* Hook یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند.و همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. From 01226036bc29e77e1e713ecc97a4c36744b283cc Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:24:35 +0330 Subject: [PATCH 24/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index fd3677537..c168aec84 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -143,7 +143,7 @@ function FriendListItem(props) { **آیا این کد با مثال‌های اصلی معادل است؟** بله، دقیقا همانطور عمل می‌کند.اگر دقیق‌تر نگاه کنید، متوجه می‌شوید که ما تغییری در رفتار ایجاد نکردیم. تمام کاری که کردیم این بود که کد مشترک بین دو تابع را درون تابعی جدا قرار دادیم. **هوک‌های شخصی‌سازی شده قراردادیست که به طور ذاتی به جای اینکه یک ویژگی ری‌اکتی باشد از طراحی هوک‌ها پیروی می‌کند.** **آیا مجبورم که حتما نام هوک شخصی خودم را با “`use`” آغاز کنم؟** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین هوک‌ها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش هوک‌هایی را فراخوانی کرده باشد. -**آیا دو کامپوننت که از Hook یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند?** خیر. hookهای شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از Hook شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. +**آیا دو کامپوننت که از هوک یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند؟** خیر. هوک‌هایی شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از هوک شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. **چگونه یک Hook شخصی state ایزوله می‌گیرد?** هر *فراخوانی* Hook یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند.و همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. From f7480431bbff8f4525a386bcef1c6f978953fd43 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:24:47 +0330 Subject: [PATCH 25/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c168aec84..c7e91bc90 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -145,7 +145,7 @@ function FriendListItem(props) { **آیا مجبورم که حتما نام هوک شخصی خودم را با “`use`” آغاز کنم؟** لطفا همین‌ کار را کنید. این قراردادی خیلی مهم است. بدون آن نمی‌توانیم به صورت خودکار نقض [قوانین هوک‌ها را](/docs/hooks-rules.html) چک کنیم زیرا نمی‌توانیم بگوییم که یک تابع بخصوص درونش هوک‌هایی را فراخوانی کرده باشد. **آیا دو کامپوننت که از هوک یکسانی استفاده می‌کنند state را به اشتراک می‌گذارند؟** خیر. هوک‌هایی شخصی‌سازی شده مکانیزمی برای استفاده مجدد از منطق *با state* هستند (مانند تنظیم اشتراک و به خاطر سپردن مقدار کنونی)، ولی هربار که از هوک شخصی استفاده می‌کنید، تمام state و effectهای درونش کاملا ایزوله هستند. -**چگونه یک Hook شخصی state ایزوله می‌گیرد?** هر *فراخوانی* Hook یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند.و همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. +**چگونه یک هوک شخصی‌سازی شده state ایزوله می‌گیرد؟** هر *فراخوانی* هوک یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند. همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. ### نکته: انتقال اطلاعات بین Hookها {#tip-pass-information-between-hooks} From 84a16c77124dd10d931979001dd2d2afff7d829c Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:24:59 +0330 Subject: [PATCH 26/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c7e91bc90..8cb813fcb 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -147,7 +147,7 @@ function FriendListItem(props) { **چگونه یک هوک شخصی‌سازی شده state ایزوله می‌گیرد؟** هر *فراخوانی* هوک یک state ایزوله دریافت می‌کند. به خاطر فراخوانی مستقیم `useFriendStatus`، از دیدگاه ری‌اکت کامپوننت ما `useState` و `useEffect` را فراخوانی می‌کند. همان گونه که [درقبل](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [آموختیم](/docs/hooks-state.html#tip-using-multiple-state-variables)،می‌توانیم `useState` و `useEffect` هر چقدر که بخواهیم در یک کامپوننت صدا بزنیم، و همه آنها کاملا مستقل از هم خواهند بود. -### نکته: انتقال اطلاعات بین Hookها {#tip-pass-information-between-hooks} +### نکته: انتقال اطلاعات بین هوک‌ها {#tip-pass-information-between-hooks} از آنجایی که Hookها تابع هستند، می‌توانیم بین آنها اطلاعات رد و بدل کنیم. From 370400ff40ff5d0225b368d672f8f0819206d707 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:25:12 +0330 Subject: [PATCH 27/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 8cb813fcb..114336b2a 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -109,7 +109,7 @@ function useFriendStatus(friendID) { } ``` -حالا ببینیم که Hook ما چگونه کار می‌کند. +حالا ببینیم که هوک ما چگونه کار می‌کند. ## استفاده از Hook شخصی‌سازی شده {#using-a-custom-hook} From 847ae6436b2bd756bb017ca9e2c8fe58306ae820 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:25:23 +0330 Subject: [PATCH 28/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 114336b2a..9b3ac9695 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -111,7 +111,7 @@ function useFriendStatus(friendID) { حالا ببینیم که هوک ما چگونه کار می‌کند. -## استفاده از Hook شخصی‌سازی شده {#using-a-custom-hook} +## استفاده از هوک شخصی‌سازی شده {#using-a-custom-hook} در ابتدا، هدف اصلی ما این بود که منطق اضافی را از کامپوننت‌های `FriendStatus` و `FriendListItem` حذف کنیم. هر دوی آن‌ها می‌خواهند بدانند که یک دوست آنلاین هست یا خیر. From 97b884a56bc01ee57918e8770f62a6456370868c Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:25:33 +0330 Subject: [PATCH 29/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 9b3ac9695..5d4190727 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -153,7 +153,7 @@ function FriendListItem(props) { -برای نشان دادن این‌کار ، از کامپوننت دیگری در مثال فرضی چت‌مان استفاده می‌کنیم. این گیرنده پذیرش پیام است که آنلاین بودن دوست انتخاب شده را به‌ ما نشان می‌دهد: +برای نشان دادن این‌کار، از کامپوننت دیگری در مثال فرضی گفتگو استفاده می‌کنیم. این یک انتخاب‌گرگیرنده پیام گفتگو است که آنلاین بودن دوست انتخاب شده را به‌ ما نشان می‌دهد: ```js{8-9,13} const friendList = [ From efb8daffa2c8c48274bc9afd90acd78bc79d0378 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:25:53 +0330 Subject: [PATCH 30/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 5d4190727..31ff82270 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -115,7 +115,7 @@ function useFriendStatus(friendID) { در ابتدا، هدف اصلی ما این بود که منطق اضافی را از کامپوننت‌های `FriendStatus` و `FriendListItem` حذف کنیم. هر دوی آن‌ها می‌خواهند بدانند که یک دوست آنلاین هست یا خیر. -حالا که ما این منطق را به عنوان یک Hook `useFriendStatus` خارج کردیم، فقط باید استفاده‌اش کنیم. +حالا که ما این منطق را به عنوان یک هوک `useFriendStatus` خارج کردیم، فقط باید استفاده‌اش کنیم. ```js{2} function FriendStatus(props) { From f6b7155c6f8599be8a8a5807a8a09d2524300b69 Mon Sep 17 00:00:00 2001 From: Abolfazl Reazvani Naraqi Date: Sun, 20 Dec 2020 10:26:09 +0330 Subject: [PATCH 31/37] Update content/docs/hooks-custom.md Co-authored-by: Soroush Torkzadeh --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 31ff82270..0f715e90b 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -186,7 +186,7 @@ function ChatRecipientPicker() { ما مقدار آی‌دی دوست انتخابی را درون متغییر state `recipientID` قرار می‌دهیم، و در صورتی که کاربر دوست دیگری را از `