From 845f74cd207a810092c64532903005129f8225f5 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Sat, 9 Nov 2019 14:33:21 +0400 Subject: [PATCH 1/5] Translate Custom Hooks Overview --- content/docs/hooks-custom.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index e8b8883a9..c36b4210e 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -1,16 +1,16 @@ --- id: hooks-custom -title: Building Your Own Hooks +title: Xüsusi Hookların Düzəldilməsi permalink: docs/hooks-custom.html 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. +*Hooklar* React 16.8-ə əlavə olunan yenilikdir. Hooklar ilə klas yazmadan state və ya digər React xüsusiyyətlərindən istifadə edə bilərsiniz. -Building your own Hooks lets you extract component logic into reusable functions. +Xüsusi Hookları düzəldərək komponent məntiqini yenidən istifadə oluna bilən funksiyalara ixrac etmək mümkündür. -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 Hookunun İstifadəsini](/docs/hooks-effect.html#example-using-hooks-1) öyrəndiyimiz zaman çat applikasiyasında dostun onlayn və ya oflayn olduğunu mesaj ilə göstərmək üçün istifadə olunan komponentə baxdıq: ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -30,13 +30,13 @@ function FriendStatus(props) { }); if (isOnline === null) { - return 'Loading...'; + return 'Yüklənir...'; } - return isOnline ? 'Online' : 'Offline'; + return isOnline ? 'Onlayn' : 'Oflayn'; } ``` -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: +Gəlin, kontakt siyahısının olduğunu və onlayn istifadəçiləri yaşıl rəngdə göstərmək istədiyimizi fərz edək. Yuxarıdakı kodu `FriendListItem` komponentinə kopiyalaya bilərik. Lakin, bu ideal olmayacaq: ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -63,9 +63,9 @@ function FriendListItem(props) { } ``` -Instead, we'd like to share this logic between `FriendStatus` and `FriendListItem`. +Əvəzinə, biz eyni məntiqi `FriendStatus` və `FriendListItem` komponentləri arasında paylaşmaq istəyirik. -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. +React-də state-li məntiqi komponentlər arasında paylaşmaq üçün iki məşhur üsul var: [render propları](/docs/render-props.html) və [yüksək dərəcəli komponentlər](/docs/higher-order-components.html). Bu sənəddə, Hooklar ilə komponent ağacına yeni komponentlər əlavə etmədən bir çox problemi necə həll edə biləcəyimizə baxacağıq. ## Extracting a Custom Hook {#extracting-a-custom-hook} From 1f7f3817d8a10a1168c8023d9b8f8709aa750602 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Sun, 10 Nov 2019 13:26:50 +0400 Subject: [PATCH 2/5] Translate Extracting Custom Hook and Using Custom Hook --- content/docs/hooks-custom.md | 50 ++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c36b4210e..985780ef4 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -67,11 +67,11 @@ function FriendListItem(props) { React-də state-li məntiqi komponentlər arasında paylaşmaq üçün iki məşhur üsul var: [render propları](/docs/render-props.html) və [yüksək dərəcəli komponentlər](/docs/higher-order-components.html). Bu sənəddə, Hooklar ilə komponent ağacına yeni komponentlər əlavə etmədən bir çox problemi necə həll edə biləcəyimizə baxacağıq. -## Extracting a Custom Hook {#extracting-a-custom-hook} +## Xüsusi Hookun İxracı {#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! +İki JavaScript funksiyası arasında məntiq paylaşmaq istədikdə bu məntiqi üçüncü funksiyaya ixrc edirik. Komponent və Hookların funksiya olduğundan eyni məntiq bu primitivlərə də aiddir! -**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: +**Adı "`use`" ilə başlayan və digər Hookları çağıran JavaScript funksiyası xüsusi Hook adlanır.** Məsələn, aşağıdakı `useFriendStatus` funksiyası bizim ilk xüsusi Hookumuzdur: ```js{3} import React, { useState, useEffect } from 'react'; @@ -94,11 +94,11 @@ function useFriendStatus(friendID) { } ``` -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. +Bu funksiyada heç bir yenilik yoxdur -- yuxarıdakı komponentlərdə olan məntiq bura köçürülüb. Komponentdə olduğu kimi xüsusi Hooklarda olan digər Hook çağırışlarını şərtsiz və funksiyanın yuxarısında yazın. -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. +React komponentindən fərqli olaraq xüsusi Hookun xüsusi imzası olmamalıdır. Arqument kimi nə qəbul edəcəyinə və nə qaytaracağına (əgər qaytaracaqsa) biz qərar veririk. Digər sözlə, bu sadə funksiyadır. [Hookların qaydalarının](/docs/hooks-rules.html) bu funksiyaya tətbiq olunması üçün bu funksiyanın adı `use` ilə başlamalıdır. -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: +`useFriendStatus` Hookunun məqsədi dostun statusuna abunə olmaqdır. Bu səbəbdən, bu Hook, arqument kimi `friendID` dəyərini qəbul edir və dostun onlayn olmasını qaytarır: ```js function useFriendStatus(friendID) { @@ -110,22 +110,22 @@ function useFriendStatus(friendID) { } ``` -Now let's see how we can use our custom Hook. +İndi, gəlin xüsusi Hookumuzu işlədək. -## Using a Custom Hook {#using-a-custom-hook} +## Xüsusi Hookun İşlədilməsi {#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. +Başlanğıcda, məqsədimiz kopiyalanmış məntiqi `FriendStatus` və `FriendListItem` komponentlərindən silmək idi. Hər iki komponent dostun onlayn olmasını bilmək istəyir. -Now that we've extracted this logic to a `useFriendStatus` hook, we can *just use it:* +Bu məntiqi `useFriendStatus` Hookuna ixrac etdiyimizdən biz bu Hooku *işlədə bilərik:* ```js{2} function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { - return 'Loading...'; + return 'Yüklənir...'; } - return isOnline ? 'Online' : 'Offline'; + return isOnline ? 'Onlayn' : 'Oflayn'; } ``` @@ -141,25 +141,25 @@ 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.** +**Bu kod orijinal nümunələr ilə eynidir?** Bəli, bu kod tam olaraq eyni işləyir. Yaxından baxdıqda, davranışa heç bir dəyişiklik etmədiyimizi görəcəksiniz. Sadəcə olaraq iki funksiya arasında olan ümumu kodu ayrı funksiyaya ixrac etdik. **Xüsusi Hooklar, React xüsusiyyəti deyil, əvəzinə Hookların dizaynını izləyərək yaranan konvensiyadır.** -**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. +**Xüsusi Hookları “`use`” başlayan adlar ilə adlandırım?** Xahiş edirik ki, belə edəsiniz. Bu konvensiya çox vacibdir. Ad belə belə olmadıqda [Hookların qaydalarının](/docs/hooks-rules.html) pozulmasını avtomatik olaraq yoxlaya bilməyəcəyik. Çünki, hansı funksiyaların daxilində Hookların olduğunu bilməyəcəyik. -**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. +**İki komponent eyni Hookun state-ini paylaşır?** Xeyr. Xüsusi Hookların *state-li məntiqi* (məsələn, abunəlik quraşdırıb cari dəyərini yadda saxlamaq kimi) paylaşmaq üçün mexaniz olmasına baxmayaraq xüsusi Hooku çağrıldıqda state və effektlər təcrid olunur. -**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. +**Xüsusi Hook ilə state necə paylaşılmır?** Hər Hook *çağırışı* təcrid olunmuş state yaradır. `useFriendStatus` Hookunu birbaşa çağırdığımızdan React-in perspektivindən baxdıqda komponentlər `useState` və `useEffect` Hooklarını çağırırlar. [Əvvəl](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [öyrəndiyimiz kimi](/docs/hooks-state.html#tip-using-multiple-state-variables) bir komponentdən `useState` və `useEffect` Hooklarını bir neçə dəfə çağıra bilərik. -### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks} +### Məsləhət: Hooklar Arasında Məlumatları Göndər {#tip-pass-information-between-hooks} -Since Hooks are functions, we can pass information between them. +Hookların funksiya olduğundan biz Hooklar arasında məlumat göndərə bilərik. -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: +Bubu göstərmək üçün çat nümunəmizə yeni komponent əlavə edəcəyik. Bu çat mesajını qəbul edəcək istifadəçini seçən komponent, istifadəçinin onlayn olacağını göstərir: ```js{8-9,13} const friendList = [ - { id: 1, name: 'Phoebe' }, - { id: 2, name: 'Rachel' }, - { id: 3, name: 'Ross' }, + { id: 1, name: 'Aysel' }, + { id: 2, name: 'Aynur' }, + { id: 3, name: 'Nazim' }, ]; function ChatRecipientPicker() { @@ -184,16 +184,16 @@ 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 `` seçicisindən fərqli dostu seçdikdə isə bu state-i yeniləyirik. -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: +`useState` çağırışı ilə `recipientID` state dəyişəninin ən yeni dəyərini aldığımızdan bu dəyəri xüsusi `useFriendStatus` Hookuna arqument kimi göndərə bilərik: ```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. +Bunun ilə biz *cari seçilmiş* dostun onlayn olduğunu bilirik. Fərqli dost seçib `recipientID` state dəyişənini yenilədikdə `useFriendStatus` Hooku köhnə dostun onlayn statusundan abunəliyi silib yeni seçilmiş dostun onlayn statusuna abunə olacaq. ## `useYourImagination()` {#useyourimagination} From 8d263d6171cb5cd27b5330c8f5e30dbfdf069aff Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Mon, 11 Nov 2019 13:19:32 +0400 Subject: [PATCH 3/5] Translate useYourImagination section in Custom Hooks --- content/docs/hooks-custom.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 985780ef4..778f79435 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -197,11 +197,11 @@ Bunun ilə biz *cari seçilmiş* dostun onlayn olduğunu bilirik. Fərqli dost s ## `useYourImagination()` {#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. +Xüsusi Hooklar ilə məntiqləri paylaşmaq mümkündür. Xüsusi Hooklar ilə anket idarəsi, animasiya, deklarativ abunəliklər, taymerlər və bizim nəzərə almadığımız digər ssenariləri əhatə etmək mümkündür. Əlavə olaraq, yatatdığınız Hookları React xüsusiyyətləri kimi rahat işlədə bilərsiniz. -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. +Abstraksiyaları öncədən əlavə etməkdən çəkinin. Funksiya komponentləri ilə çox problemləri həll etmək olur deyə standart funksiya komponentinin kodu daha uzun olacaq. Bu normaldır. Məntiqi dərhal ayırmaq *lazım deyil.* Lakin, xüsusi Hook ilə mürəkkəb məntiqi sadə interfeys arxasında gizlədə biləcək halları axtarmağı və qarışıq komponentləri sadələşdirməyi tövsiyyə edirik. -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: +Məsələn, sizdə çoxlu lokal state-dən istifadə edən mürəkkəb komponent ola bilər. `useState` ilə yeniləmə məntiqini mərkəzləşdirmək çətin olduğundan bu state-ləri [Redux](https://redux.js.org/) reducer-i ilə işlədə bilərsiniz: ```js function todosReducer(state, action) { @@ -218,9 +218,9 @@ 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. +Reducer-ləri ayrılıqda test emək və reducer-lər ilə mürəkkəb yeniləmə məntiqini böyütmək daha rahatdır. Lazım olduqda, bir reducer-i bir neçə kiçik reducer-lərə də parçalaya bilərsiniz. Lakin, React-in lokal state-inin faydalarını bəyənə bilər və ya digər kitabxana yükləmək istəməyə bilərsiniz. -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: +Komponentin *lokal* state-ini reducer ilə idaraə etmək üçün `useReducer` Hooku yaza bilərik? Sadə formada bu funksiya aşağıdakı formada olacaq: ```js function useReducer(reducer, initialState) { @@ -235,7 +235,7 @@ function useReducer(reducer, initialState) { } ``` -Now we could use it in our component, and let the reducer drive its state management: +İndi, biz bu Hooku öz komponentimizdə istifadə edə bilər və reducer ilə state-i idarə edə bilərik: ```js{2} function Todos() { @@ -249,4 +249,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). +Mürəkkəb komponentdə lokal state-i reducer ilə idarə etmək çox lazım olduğundan biz `useReducer` Hookunu React-ə əlavə etmişik. Bu və digər daxili Hooklar haqqında əlavə məlumat almaq üçün [Hookların API arayışı](/docs/hooks-reference.html) sənədinə baxa bilərsiniz. From d6341003f01580c28ad33598e605af1c9c251327 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 4 Dec 2019 17:13:14 +0400 Subject: [PATCH 4/5] Fix translations in Custom Hooks --- content/docs/hooks-custom.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 778f79435..d251804b9 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -69,7 +69,7 @@ React-də state-li məntiqi komponentlər arasında paylaşmaq üçün iki məş ## Xüsusi Hookun İxracı {#extracting-a-custom-hook} -İki JavaScript funksiyası arasında məntiq paylaşmaq istədikdə bu məntiqi üçüncü funksiyaya ixrc edirik. Komponent və Hookların funksiya olduğundan eyni məntiq bu primitivlərə də aiddir! +İki JavaScript funksiyası arasında məntiq paylaşmaq istədikdə bu mənti üçüncü funksiyaya ixrac edilir. Komponent və Hookların JavaScript funksiyaları olduğundan eyni məntiq bu primitivlərə də aiddir! **Adı "`use`" ilə başlayan və digər Hookları çağıran JavaScript funksiyası xüsusi Hook adlanır.** Məsələn, aşağıdakı `useFriendStatus` funksiyası bizim ilk xüsusi Hookumuzdur: @@ -96,9 +96,9 @@ function useFriendStatus(friendID) { Bu funksiyada heç bir yenilik yoxdur -- yuxarıdakı komponentlərdə olan məntiq bura köçürülüb. Komponentdə olduğu kimi xüsusi Hooklarda olan digər Hook çağırışlarını şərtsiz və funksiyanın yuxarısında yazın. -React komponentindən fərqli olaraq xüsusi Hookun xüsusi imzası olmamalıdır. Arqument kimi nə qəbul edəcəyinə və nə qaytaracağına (əgər qaytaracaqsa) biz qərar veririk. Digər sözlə, bu sadə funksiyadır. [Hookların qaydalarının](/docs/hooks-rules.html) bu funksiyaya tətbiq olunması üçün bu funksiyanın adı `use` ilə başlamalıdır. +React komponentindən fərqli olaraq xüsusi Hookun xüsusi imzası olmamalıdır. Arqument kimi nə qəbul edəcəyinə və nə qaytaracağına (əgər qaytaracaqsa) özümüz qərar veririk. Digər sözlə, bu sadə funksiyadır. [Hookların qaydalarının](/docs/hooks-rules.html) bu funksiyaya tətbiq olunması üçün bu funksiyanın adı `use` ilə başlamalıdır. -`useFriendStatus` Hookunun məqsədi dostun statusuna abunə olmaqdır. Bu səbəbdən, bu Hook, arqument kimi `friendID` dəyərini qəbul edir və dostun onlayn olmasını qaytarır: +Dostun statusuna abunə olmaq `useFriendStatus` Hookunun əsas məqsədidir. Bu səbəbdən, bu Hook `friendID` dəyərini arqument kimi qəbul edərək dostun onlayn olmasını qaytarır: ```js function useFriendStatus(friendID) { @@ -110,7 +110,7 @@ function useFriendStatus(friendID) { } ``` -İndi, gəlin xüsusi Hookumuzu işlədək. +İndi, xüsusi Hookumuzu işlətməyin vaxtıdır. ## Xüsusi Hookun İşlədilməsi {#using-a-custom-hook} @@ -141,19 +141,19 @@ function FriendListItem(props) { } ``` -**Bu kod orijinal nümunələr ilə eynidir?** Bəli, bu kod tam olaraq eyni işləyir. Yaxından baxdıqda, davranışa heç bir dəyişiklik etmədiyimizi görəcəksiniz. Sadəcə olaraq iki funksiya arasında olan ümumu kodu ayrı funksiyaya ixrac etdik. **Xüsusi Hooklar, React xüsusiyyəti deyil, əvəzinə Hookların dizaynını izləyərək yaranan konvensiyadır.** +**Bu kod orijinal nümunələr ilə eynidir?** Bəli, bu kod tam olaraq eyni işləyir. Yaxından baxdıqda, davranışa heç bir dəyişiklik etmədiyimizi görəcəksiniz. Sadəcə olaraq iki funksiya arasında olan ümumu kodu ayrı funksiyaya ixrac etdik. **Xüsusi Hooklar React-in xüsusiyyəti deyil, əvəzinə Hookların dizaynını izləyərək yaranmış konvensiyadır.** -**Xüsusi Hookları “`use`” başlayan adlar ilə adlandırım?** Xahiş edirik ki, belə edəsiniz. Bu konvensiya çox vacibdir. Ad belə belə olmadıqda [Hookların qaydalarının](/docs/hooks-rules.html) pozulmasını avtomatik olaraq yoxlaya bilməyəcəyik. Çünki, hansı funksiyaların daxilində Hookların olduğunu bilməyəcəyik. +**Xüsusi Hookları “`use`” ilə başlayan adlar ilə adlandırmaq lazımdır?** Xahiş edirik ki, belə edəsiniz. Bu konvensiya çox vacibdir. Ad bu formada olmadıqda [Hookların qaydalarının](/docs/hooks-rules.html) pozulması avtomatik olaraq yoxlana bilməyəck. Çünki, hansı funksiyaların daxilində Hookların olduğunu bilməyəcəyik. -**İki komponent eyni Hookun state-ini paylaşır?** Xeyr. Xüsusi Hookların *state-li məntiqi* (məsələn, abunəlik quraşdırıb cari dəyərini yadda saxlamaq kimi) paylaşmaq üçün mexaniz olmasına baxmayaraq xüsusi Hooku çağrıldıqda state və effektlər təcrid olunur. +**İki komponent eyni Hookun state-ini paylaşır?** Xeyr. Xüsusi Hookların *state-li məntiqi* (məsələn, abunəlik quraşdırıb cari dəyərini yadda saxlamaq kimi) paylaşmaq üçün mexanizm olmasına baxmayaraq xüsusi Hooku çağrıldıqda state və effektlər təcrid olunur. -**Xüsusi Hook ilə state necə paylaşılmır?** Hər Hook *çağırışı* təcrid olunmuş state yaradır. `useFriendStatus` Hookunu birbaşa çağırdığımızdan React-in perspektivindən baxdıqda komponentlər `useState` və `useEffect` Hooklarını çağırırlar. [Əvvəl](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [öyrəndiyimiz kimi](/docs/hooks-state.html#tip-using-multiple-state-variables) bir komponentdən `useState` və `useEffect` Hooklarını bir neçə dəfə çağıra bilərik. +**Xüsusi Hook ilə state necə paylaşılmır?** Hər Hook *çağırışı* təcrid olunmuş state yaradır. React-in perspektivindən baxdıqda `useFriendStatus` Hookunu birbaşa çağırdığımızda `useState` və `useEffect` Hooklarını komponentlər çağırırlar. [Əvvəl](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [öyrəndiyimiz kimi](/docs/hooks-state.html#tip-using-multiple-state-variables) bir komponentdən `useState` və `useEffect` Hooklarını bir neçə dəfə çağıra bilərik. ### Məsləhət: Hooklar Arasında Məlumatları Göndər {#tip-pass-information-between-hooks} Hookların funksiya olduğundan biz Hooklar arasında məlumat göndərə bilərik. -Bubu göstərmək üçün çat nümunəmizə yeni komponent əlavə edəcəyik. Bu çat mesajını qəbul edəcək istifadəçini seçən komponent, istifadəçinin onlayn olacağını göstərir: +Bunu göstərmək üçün çat nümunəmizə yeni komponent əlavə edəcəyik. Bu komponent çat mesajını qəbul edən istifadəçini seçərək bu istifadəçinin onlayn olacağını göstərir: ```js{8-9,13} const friendList = [ @@ -184,7 +184,7 @@ function ChatRecipientPicker() { } ``` -Cari seçilmiş dost ID-ini `recipientID` adlı state dəyişənində saxlayır, istifadəçi `` seçicisindən fərqli dostu seçdikdə isə bu state-i yeniləyirik. `useState` çağırışı ilə `recipientID` state dəyişəninin ən yeni dəyərini aldığımızdan bu dəyəri xüsusi `useFriendStatus` Hookuna arqument kimi göndərə bilərik: @@ -193,11 +193,11 @@ Cari seçilmiş dost ID-ini `recipientID` adlı state dəyişənində saxlayır, const isRecipientOnline = useFriendStatus(recipientID); ``` -Bunun ilə biz *cari seçilmiş* dostun onlayn olduğunu bilirik. Fərqli dost seçib `recipientID` state dəyişənini yenilədikdə `useFriendStatus` Hooku köhnə dostun onlayn statusundan abunəliyi silib yeni seçilmiş dostun onlayn statusuna abunə olacaq. +Biz bu formada *cari seçilmiş* dostun onlayn olduğunu bilirik. Fərqli dost seçib `recipientID` state dəyişənini yenilədikdə `useFriendStatus` Hooku köhnə dostun onlayn statusundan abunəliyi silib yeni seçilmiş dostun onlayn statusuna yeni abunəlik yaradacaq. ## `useYourImagination()` {#useyourimagination} -Xüsusi Hooklar ilə məntiqləri paylaşmaq mümkündür. Xüsusi Hooklar ilə anket idarəsi, animasiya, deklarativ abunəliklər, taymerlər və bizim nəzərə almadığımız digər ssenariləri əhatə etmək mümkündür. Əlavə olaraq, yatatdığınız Hookları React xüsusiyyətləri kimi rahat işlədə bilərsiniz. +Xüsusi Hooklar ilə məntiqləri paylaşmaq mümkündür. Xüsusi Hooklar ilə anket idarəsi, animasiya, deklarativ abunəliklər, taymerlər və bizim nəzərə almadığımız digər ssenariləri əhatə etmək mümkündür. Əlavə olaraq, yaratdığınız Hookları React xüsusiyyətləri kimi rahat işlədə bilərsiniz. Abstraksiyaları öncədən əlavə etməkdən çəkinin. Funksiya komponentləri ilə çox problemləri həll etmək olur deyə standart funksiya komponentinin kodu daha uzun olacaq. Bu normaldır. Məntiqi dərhal ayırmaq *lazım deyil.* Lakin, xüsusi Hook ilə mürəkkəb məntiqi sadə interfeys arxasında gizlədə biləcək halları axtarmağı və qarışıq komponentləri sadələşdirməyi tövsiyyə edirik. @@ -220,7 +220,7 @@ function todosReducer(state, action) { Reducer-ləri ayrılıqda test emək və reducer-lər ilə mürəkkəb yeniləmə məntiqini böyütmək daha rahatdır. Lazım olduqda, bir reducer-i bir neçə kiçik reducer-lərə də parçalaya bilərsiniz. Lakin, React-in lokal state-inin faydalarını bəyənə bilər və ya digər kitabxana yükləmək istəməyə bilərsiniz. -Komponentin *lokal* state-ini reducer ilə idaraə etmək üçün `useReducer` Hooku yaza bilərik? Sadə formada bu funksiya aşağıdakı formada olacaq: +Komponentin *lokal* state-ini reducer ilə idarə etmək üçün `useReducer` Hooku yaza bilərik? Sadə formada bu funksiya aşağıdakı formada olacaq: ```js function useReducer(reducer, initialState) { @@ -249,4 +249,4 @@ function Todos() { } ``` -Mürəkkəb komponentdə lokal state-i reducer ilə idarə etmək çox lazım olduğundan biz `useReducer` Hookunu React-ə əlavə etmişik. Bu və digər daxili Hooklar haqqında əlavə məlumat almaq üçün [Hookların API arayışı](/docs/hooks-reference.html) sənədinə baxa bilərsiniz. +Mürəkkəb komponentdə lokal state-i reducer ilə idarə etməyin çox lazım olduğundan biz `useReducer` Hookunu React-ə əlavə etmişik. Bu və digər daxili Hooklar haqqında əlavə məlumat almaq üçün [Hookların API arayışı](/docs/hooks-reference.html) sənədinə baxa bilərsiniz. From 8ff6a7c3765b330dbebe940056b0fd1ec63f5065 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Sun, 8 Dec 2019 14:04:05 +0400 Subject: [PATCH 5/5] Fix translations in Custom Hooks --- content/docs/hooks-custom.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index d251804b9..58ab78a3a 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -69,7 +69,7 @@ React-də state-li məntiqi komponentlər arasında paylaşmaq üçün iki məş ## Xüsusi Hookun İxracı {#extracting-a-custom-hook} -İki JavaScript funksiyası arasında məntiq paylaşmaq istədikdə bu mənti üçüncü funksiyaya ixrac edilir. Komponent və Hookların JavaScript funksiyaları olduğundan eyni məntiq bu primitivlərə də aiddir! +Eyni məntiqi iki JavaScript funksiyası arasında paylaşmaq üçün bu məntiq üçüncü funksiyaya ixrac edilir. Komponent və Hookların JavaScript funksiyaları olduğundan eyni yanaşma bu primitivlərə də aiddir! **Adı "`use`" ilə başlayan və digər Hookları çağıran JavaScript funksiyası xüsusi Hook adlanır.** Məsələn, aşağıdakı `useFriendStatus` funksiyası bizim ilk xüsusi Hookumuzdur: @@ -96,7 +96,7 @@ function useFriendStatus(friendID) { Bu funksiyada heç bir yenilik yoxdur -- yuxarıdakı komponentlərdə olan məntiq bura köçürülüb. Komponentdə olduğu kimi xüsusi Hooklarda olan digər Hook çağırışlarını şərtsiz və funksiyanın yuxarısında yazın. -React komponentindən fərqli olaraq xüsusi Hookun xüsusi imzası olmamalıdır. Arqument kimi nə qəbul edəcəyinə və nə qaytaracağına (əgər qaytaracaqsa) özümüz qərar veririk. Digər sözlə, bu sadə funksiyadır. [Hookların qaydalarının](/docs/hooks-rules.html) bu funksiyaya tətbiq olunması üçün bu funksiyanın adı `use` ilə başlamalıdır. +React komponentindən fərqli olaraq xüsusi Hookun xüsusi imzası olmamalıdır. Hookun arqument kimi nə qəbul etdiyinə və nə qaytardığına (əgər qaytaracaqsa) özümüz qərar veririk. Digər sözlə, bu sadə JavaScript funksiyasıdır. [Hookların qaydalarının](/docs/hooks-rules.html) bu funksiyaya tətbiq olunması üçün bu funksiyanın adı `use` ilə başlamalıdır. Dostun statusuna abunə olmaq `useFriendStatus` Hookunun əsas məqsədidir. Bu səbəbdən, bu Hook `friendID` dəyərini arqument kimi qəbul edərək dostun onlayn olmasını qaytarır: @@ -114,7 +114,7 @@ function useFriendStatus(friendID) { ## Xüsusi Hookun İşlədilməsi {#using-a-custom-hook} -Başlanğıcda, məqsədimiz kopiyalanmış məntiqi `FriendStatus` və `FriendListItem` komponentlərindən silmək idi. Hər iki komponent dostun onlayn olmasını bilmək istəyir. +Başlanğıcda, məqsədimiz kopiyalanmış məntiqi `FriendStatus` və `FriendListItem` komponentlərindən silmək idi. Hər iki komponentdə dostun onlayn olmasını bilmək lazımdır. Bu məntiqi `useFriendStatus` Hookuna ixrac etdiyimizdən biz bu Hooku *işlədə bilərik:* @@ -143,17 +143,17 @@ function FriendListItem(props) { **Bu kod orijinal nümunələr ilə eynidir?** Bəli, bu kod tam olaraq eyni işləyir. Yaxından baxdıqda, davranışa heç bir dəyişiklik etmədiyimizi görəcəksiniz. Sadəcə olaraq iki funksiya arasında olan ümumu kodu ayrı funksiyaya ixrac etdik. **Xüsusi Hooklar React-in xüsusiyyəti deyil, əvəzinə Hookların dizaynını izləyərək yaranmış konvensiyadır.** -**Xüsusi Hookları “`use`” ilə başlayan adlar ilə adlandırmaq lazımdır?** Xahiş edirik ki, belə edəsiniz. Bu konvensiya çox vacibdir. Ad bu formada olmadıqda [Hookların qaydalarının](/docs/hooks-rules.html) pozulması avtomatik olaraq yoxlana bilməyəck. Çünki, hansı funksiyaların daxilində Hookların olduğunu bilməyəcəyik. +**Xüsusi Hookları “`use`” ilə başlayan adlar ilə adlandırmaq lazımdır?** Xahiş edirik ki, belə edəsiniz. Bu konvensiya çox vacibdir. Hookun adı bu formada olmadıqda [Hookların qaydalarının](/docs/hooks-rules.html) pozulması avtomatik olaraq yoxlanmayacaq. Çünki, hansı funksiyaların daxilində Hookların olduğunu bilməyəcəyik. -**İki komponent eyni Hookun state-ini paylaşır?** Xeyr. Xüsusi Hookların *state-li məntiqi* (məsələn, abunəlik quraşdırıb cari dəyərini yadda saxlamaq kimi) paylaşmaq üçün mexanizm olmasına baxmayaraq xüsusi Hooku çağrıldıqda state və effektlər təcrid olunur. +**İki komponent eyni Hookun state-ini paylaşır?** Xeyr. Xüsusi Hookların *state-li məntiqi* (məsələn, abunəlik quraşdırıb cari dəyərini yadda saxlamaq kimi) paylaşmaq üçün mexanizm olmasına baxmayaraq xüsusi Hooku çağrıldıqda state və effektlər çağrılan komponentə təcrid olunur. -**Xüsusi Hook ilə state necə paylaşılmır?** Hər Hook *çağırışı* təcrid olunmuş state yaradır. React-in perspektivindən baxdıqda `useFriendStatus` Hookunu birbaşa çağırdığımızda `useState` və `useEffect` Hooklarını komponentlər çağırırlar. [Əvvəl](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [öyrəndiyimiz kimi](/docs/hooks-state.html#tip-using-multiple-state-variables) bir komponentdən `useState` və `useEffect` Hooklarını bir neçə dəfə çağıra bilərik. +**Xüsusi Hook ilə state necə paylaşılmır?** Hər Hook *çağırışı* təcrid olunmuş state yaradır. React-in perspektivindən baxdıqda `useFriendStatus` Hookunu birbaşa çağırdıqda komponentlər `useState` və `useEffect` Hooklarını çağırırlar. [Əvvəl](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns) [öyrəndiyimiz kimi](/docs/hooks-state.html#tip-using-multiple-state-variables) bir komponentdən `useState` və `useEffect` Hooklarını bir neçə dəfə çağıra bilərik. ### Məsləhət: Hooklar Arasında Məlumatları Göndər {#tip-pass-information-between-hooks} Hookların funksiya olduğundan biz Hooklar arasında məlumat göndərə bilərik. -Bunu göstərmək üçün çat nümunəmizə yeni komponent əlavə edəcəyik. Bu komponent çat mesajını qəbul edən istifadəçini seçərək bu istifadəçinin onlayn olacağını göstərir: +Bunu göstərmək üçün çat nümunəsinə yeni komponent əlavə edəcəyik. Bu komponent çat mesajını qəbul edən istifadəçini seçərək bu istifadəçinin onlayn olduğunu göstərir: ```js{8-9,13} const friendList = [ @@ -184,7 +184,7 @@ function ChatRecipientPicker() { } ``` -Cari seçilmiş dost ID-siini `recipientID` adlı state dəyişənində saxlayır, istifadəçi `` seçicisindən fərqli dostu seçdikdə isə bu state-i yeniləyir. `useState` çağırışı ilə `recipientID` state dəyişəninin ən yeni dəyərini aldığımızdan bu dəyəri xüsusi `useFriendStatus` Hookuna arqument kimi göndərə bilərik: @@ -193,13 +193,13 @@ Cari seçilmiş dost ID-siini `recipientID` adlı state dəyişənində saxlayı const isRecipientOnline = useFriendStatus(recipientID); ``` -Biz bu formada *cari seçilmiş* dostun onlayn olduğunu bilirik. Fərqli dost seçib `recipientID` state dəyişənini yenilədikdə `useFriendStatus` Hooku köhnə dostun onlayn statusundan abunəliyi silib yeni seçilmiş dostun onlayn statusuna yeni abunəlik yaradacaq. +Bu formada *cari seçilmiş* dostun onlayn olduğunu bilmək mümkündür. Fərqli dost seçib `recipientID` state dəyişənini yenilədikdə `useFriendStatus` Hooku köhnə dostun onlayn statusundan abunəliyi silib yeni seçilmiş dostun onlayn statusuna yeni abunəlik yaradacaq. ## `useYourImagination()` {#useyourimagination} Xüsusi Hooklar ilə məntiqləri paylaşmaq mümkündür. Xüsusi Hooklar ilə anket idarəsi, animasiya, deklarativ abunəliklər, taymerlər və bizim nəzərə almadığımız digər ssenariləri əhatə etmək mümkündür. Əlavə olaraq, yaratdığınız Hookları React xüsusiyyətləri kimi rahat işlədə bilərsiniz. -Abstraksiyaları öncədən əlavə etməkdən çəkinin. Funksiya komponentləri ilə çox problemləri həll etmək olur deyə standart funksiya komponentinin kodu daha uzun olacaq. Bu normaldır. Məntiqi dərhal ayırmaq *lazım deyil.* Lakin, xüsusi Hook ilə mürəkkəb məntiqi sadə interfeys arxasında gizlədə biləcək halları axtarmağı və qarışıq komponentləri sadələşdirməyi tövsiyyə edirik. +Abstraksiyaları öncədən əlavə etməkdən çəkinin. Funksiya komponentləri ilə çox problemləri həll etmək olur deyə standart funksiya komponentinin kodu daha uzun olacaq. Bu normaldır. Məntiqi dərhal ayırmaq *lazım deyil.* Lakin, xüsusi Hook ilə mürəkkəb məntiqi sadə interfeys arxasında gizlədə biləcəyiniz halları axtarmağı və qarışıq komponentləri sadələşdirməyi tövsiyyə edirik. Məsələn, sizdə çoxlu lokal state-dən istifadə edən mürəkkəb komponent ola bilər. `useState` ilə yeniləmə məntiqini mərkəzləşdirmək çətin olduğundan bu state-ləri [Redux](https://redux.js.org/) reducer-i ilə işlədə bilərsiniz: @@ -218,9 +218,9 @@ function todosReducer(state, action) { } ``` -Reducer-ləri ayrılıqda test emək və reducer-lər ilə mürəkkəb yeniləmə məntiqini böyütmək daha rahatdır. Lazım olduqda, bir reducer-i bir neçə kiçik reducer-lərə də parçalaya bilərsiniz. Lakin, React-in lokal state-inin faydalarını bəyənə bilər və ya digər kitabxana yükləmək istəməyə bilərsiniz. +Reducer-ləri ayrılıqda test etmək və reducer-lər ilə mürəkkəb yeniləmə məntiqini böyütmək daha rahatdır. Lazım olduqda, bir reducer-i bir neçə kiçik reducer-lərə də parçalaya bilərsiniz. Lakin, React-in lokal state-inin faydalarını bəyənə bilər və ya digər kitabxana yükləmək istəməyə bilərsiniz. -Komponentin *lokal* state-ini reducer ilə idarə etmək üçün `useReducer` Hooku yaza bilərik? Sadə formada bu funksiya aşağıdakı formada olacaq: +Komponentin *lokal* state-ini reducer ilə idarə etmək üçün `useReducer` Hooku yaza bilərik. Sadə formada bu funksiya aşağıdakı formada olacaq: ```js function useReducer(reducer, initialState) {