Skip to content

Commit f73c760

Browse files
authored
Apply suggestions from code review
Co-Authored-By: g12i <[email protected]>
1 parent a631fb4 commit f73c760

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

content/docs/hooks-custom.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ prev: hooks-rules.html
1010

1111
Tworzenie własnych hooków pozwala wydzielić logikę z komponentów do funkcji.
1212

13-
Podczas nauki o [używaniu hooka efektów](/docs/hooks-effect.html#example-using-hooks-1), poznaliśmy poniższy komponent aplikacji czatu, wyświetlający wiadomość, informującą o tym, czy znajomy jest dostępny, czy nie:
13+
Podczas nauki o [używaniu hooka efektów](/docs/hooks-effect.html#example-using-hooks-1) poznaliśmy przedstawiony poniżej komponent aplikacji czatu. Komponent ten wyświetla wiadomość informującą o tym, czy znajomy jest dostępny, czy nie:
1414

1515
```js{4-15}
1616
import React, { useState, useEffect } from 'react';
@@ -98,7 +98,7 @@ Wewnątrz nie znajdziemy nic nowego -- logika została skopiowana z komponentów
9898

9999
W przeciwieństwie do reactowych komponentów, własny hook nie ma narzuconego określonego kształtu. Sami decydujemy, jakie przyjmuje argumenty i jaką, jeśli jakąkolwiek, wartość zwróci. Innymi słowy zachowuje się jak zwykła funkcja. Jego nazwa powinna zawsze zaczynać się od `use`, aby można było już na pierwszy rzut oka stwierdzić, czy stosuje on do [zasad korzystania z hooków](/docs/hooks-rules.html).
100100

101-
Celem naszego hooka `useFriendStatus` jest zasubskrybowanie się do statusu dostępności znajomego. Dlatego przyjmuje on wartość `friendID` jako argument i zwraca informację czy znajomy jest dostępny:
101+
Celem naszego hooka `useFriendStatus` jest zasubskrybowanie się do statusu dostępności znajomego. Dlatego przyjmuje on wartość `friendID` jako argument i zwraca informację, czy znajomy jest dostępny:
102102

103103
```js
104104
function useFriendStatus(friendID) {
@@ -114,9 +114,9 @@ Teraz przyjrzymy się, jak możemy używać własnych hooków.
114114

115115
## Używanie własnych hooków {#using-a-custom-hook}
116116

117-
Przypomnijmy, że naszym celem było usunięcie powielonej logiki z komponentów `FriendStatus` i `FriendListItem`. Oba oczekują informacji o tym czy nasz znajomy jest dostępny.
117+
Przypomnijmy, że naszym celem było usunięcie powielonej logiki z komponentów `FriendStatus` i `FriendListItem`. Oba oczekują informacji o tym, czy nasz znajomy jest dostępny.
118118

119-
Teraz, kiedy już wyodrębniliśmy tę logikę do hooka `useFriendStatus`, możemy jej *po prostu użyć:*
119+
Teraz, kiedy już wyodrębniliśmy tę logikę do hooka `useFriendStatus`, możemy go *po prostu użyć:*
120120

121121
```js{2}
122122
function FriendStatus(props) {
@@ -143,11 +143,11 @@ function FriendListItem(props) {
143143

144144
**Czy ten kod jest równoważny oryginalnym przykładom?** Tak, działa on dokładnie w ten sam sposób. Jeśli przyjrzysz się uważniej, zauważysz, że nie dokonaliśmy żadnej zmiany w zachowaniu. Wszystko co zrobiliśmy, to wyodrębnienie wspólnego kodu z dwóch funkcji do jednej, osobnej funkcji. **Własne hooki są konwencją, która wynika naturalnie ze sposobu, w jaki zostały zaprojektowane hooki. Nie są one osobną funkcjonalnością Reacta.**
145145

146-
**Czy nazwy moich własnych hooków muszą zaczynać się od „`use`”?** Bardzo prosimy. Ta konwencja jest bardzo ważna. Bez niej nie moglibyśmy automatycznie sprawdzać, czy zostały naruszone [zasady korzystania z hooków](/docs/hooks-rules.html), ponieważ nie bylibyśmy w stanie stwierdzić, czy w danej funkcji znajdują się wywołania hooków.
146+
**Czy nazwy moich własnych hooków muszą zaczynać się od „`use`”?** Bardzo prosimy. Ta konwencja jest bardzo ważna. Bez niej nie moglibyśmy automatycznie sprawdzać, czy zostały naruszone [zasady korzystania z hooków](/docs/hooks-rules.html), ponieważ nie bylibyśmy w stanie stwierdzić, czy w danej funkcji znajdują się wywołania hooków.
147147

148-
**Czy dwa komponenty, korzystające z tego samego hooka, współdzielą stan?** Nie. Własne hooki to mechanizm pozwalający na współdzielenie *logiki związanej ze stanem* (takiej jak tworzenie subskrypcji i zapamiętywanie bieżącej wartości), ale za każdym razem, kiedy używasz własnego hooka cały stan i efekty wewnątrz niego są całkowicie odizolowane.
148+
**Czy dwa komponenty, korzystające z tego samego hooka, współdzielą stan?** Nie. Własne hooki to mechanizm pozwalający na współdzielenie *logiki związanej ze stanem* (takiej jak tworzenie subskrypcji i zapamiętywanie bieżącej wartości), ale za każdym razem, kiedy używasz własnego hooka, cały stan i efekty wewnątrz niego są całkowicie odizolowane od siebie nawzajem.
149149

150-
**W jaki sposób własny hook otrzymuje odizolowany stan?** Każde *wywołanie* hooka tworzy odizolowany stan. Ponieważ wywołujemy `useFriendStatus` bezpośrednio, z punktu widzenia Reacta nasze komponenty wywołują po prostu funkcje `useState` i `useEffect`. A jak [dowiedzieliśmy się](/docs/hooks-state.html#tip-using-multiple-state-variables) już [wcześniej](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), możemy w jednym komponencie wielokrotnie wywoływać funkcje `useState` i `useEffect` i będą one całkowicie niezależne.
150+
**W jaki sposób własny hook otrzymuje odizolowany stan?** Każde *wywołanie* hooka tworzy odizolowany stan. Ponieważ wywołujemy `useFriendStatus` bezpośrednio, z punktu widzenia Reacta nasze komponenty wywołują po prostu funkcje `useState` i `useEffect`. A jak [dowiedzieliśmy się](/docs/hooks-state.html#tip-using-multiple-state-variables) już [wcześniej](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), możemy w jednym komponencie wielokrotnie wywoływać funkcje `useState` oraz `useEffect` i będą one całkowicie niezależne.
151151

152152
### Porada: Przekazywanie informacji pomiędzy hookami {#tip-pass-information-between-hooks}
153153

@@ -197,9 +197,9 @@ Dzięki temu wiemy, czy *aktualnie wybrany* znajomy jest dostępny. Jeżeli wybi
197197

198198
## Użyj wyobraźni {#useyourimagination}
199199

200-
Własne hooki dają możliwość współdzielenia logiki w sposób, w jaki dotychczas nie było to możliwe w reactowych komponentach. Możesz pisać własne hooki, które obejmują szereg różnych przypadków użycia - od obsługi formularzy, animacji, deklaratywnych subskrypcji, liczników, po wiele innych, o których nie pomyśleliśmy. Co więcej, możesz tworzyć hooki, które są równie łatwe w użyciu, jak wbudowane funkcje Reacta.
200+
Własne hooki dają możliwość współdzielenia logiki w sposób, w jaki dotychczas nie było to możliwe w reactowych komponentach. Możesz pisać własne hooki, które obejmują szereg różnych przypadków użycia - od obsługi formularzy, animacji, deklaratywnych subskrypcji, liczników, po wiele innych, których jeszcze nie wymyślono. Co więcej, możesz tworzyć hooki, które są równie łatwe w użyciu, jak wbudowane funkcje Reacta.
201201

202-
Spróbuj jednak powstrzymać się od zbyt wczesnego wprowadzania abstrakcji. Teraz, kiedy komponenty funkcyjne mogą znacznie więcej, twój kod źródłowy takich komponentów najprawdopodobniej zacznie „puchnąć”. To normalne, nie powinieneś od razu *zmuszać się* do dzielenia go na hooki. Ale zachęcamy też do tego, aby zacząć rozglądać się za przypadkami, gdzie własny hook mógłby ukryć skomplikowaną logikę za prostym interfejsem albo pomóc uprzątnąć zagmatwany komponent.
202+
Spróbuj jednak powstrzymać się od zbyt wczesnego wprowadzania abstrakcji. Teraz, kiedy komponenty funkcyjne mogą znacznie więcej, twój kod źródłowy takich komponentów najprawdopodobniej zacznie „puchnąć”. To normalne, nie *zmuszaj się* od razu do dzielenia go na hooki. Ale zachęcamy też do tego, aby zacząć rozglądać się za przypadkami, gdzie własny hook mógłby ukryć skomplikowaną logikę za prostym interfejsem albo pomóc uprzątnąć zagmatwany komponent.
203203

204204
Załóżmy na przykład, że masz w swoim kodzie skomplikowany komponent z dużą ilością zmiennych stanu, zarządzanych w sposób doraźny. Hook `useState` nie jest wcale rozwiązaniem na łatwą centralizację tej logiki. Pewnie lepiej byłoby ci napisać [reduxowy](https://redux.js.org/) reduktor (ang. *reducer*):
205205

@@ -249,4 +249,4 @@ function Todos() {
249249
}
250250
```
251251

252-
Potrzeba zarządzania lokalnym stanem złożonego komponentu za pomocą reduktora jest na tyle powszechna, że wbudowaliśmy hook `useReducer` bezpośrednio w Reacta. Jego opis, wraz z innymi wbudowanymi hookami, znajdziesz w rozdziale [Hooki - interfejs API](/docs/hooks-reference.html).
252+
Potrzeba zarządzania lokalnym stanem złożonego komponentu za pomocą reduktora jest na tyle powszechna, że wbudowaliśmy hook `useReducer` bezpośrednio w Reacta. Jego opis, wraz z innymi wbudowanymi hookami, znajdziesz w rozdziale pt. [Hooki - interfejs API](/docs/hooks-reference.html).

0 commit comments

Comments
 (0)