@@ -156,10 +156,10 @@ Powyższy kod automatycznie załaduje paczkę zawierającą `OtherComponent` pod
156
156
Musi ona zwrócić obiekt (` Promise ` ) (pol. * obietnicę* ), która rozwiązuje się do modułu z eksportem domyślnym (` default ` ) zawierającym
157
157
komponent reactowy.
158
158
159
- ### Zawieszenie {#suspense}
159
+ ### Zawieszenie (ang. * Suspense * ) {#suspense}
160
160
161
- Jeśli moduł zawierający ` OtherComponent ` nie zostanie jeszcze załadowany na czas renderowania
162
- ` MyComponent ` , musimy wyświetlić zapasową zawartość, dopóki trwa ładowanie - na przykład
161
+ Jeśli moduł zawierający ` OtherComponent ` nie zostanie załadowany przed renderowaniem komponentu
162
+ ` MyComponent ` , musimy wyświetlić alternatywną zawartość, dopóki trwa ładowanie - na przykład
163
163
wskaźnik ładowania. Robimy to za pomocą komponentu ` Suspense ` .
164
164
165
165
``` js
@@ -168,18 +168,18 @@ const OtherComponent = React.lazy(() => import('./OtherComponent'));
168
168
function MyComponent () {
169
169
return (
170
170
< div>
171
- < Suspense fallback= {< div> Loading ... < / div> }>
171
+ < Suspense fallback= {< div> Wczytywanie ... < / div> }>
172
172
< OtherComponent / >
173
173
< / Suspense>
174
174
< / div>
175
175
);
176
176
}
177
177
```
178
178
179
- Props ` fallback ` akceptuje wszystkie elementy reactowe, które chcesz wyświetlić
179
+ Właściwość ` fallback ` tego komponentu akceptuje dowolny element reactowy, który będzie wyświetlany
180
180
w trakcie oczekiwania na załadowanie komponentu. Możesz umieścić komponent ` Suspense `
181
- w dowolnym miejscu nad "leniwym" komponentem. Możesz nawet zawijać wiele "leniwych komponentów"
182
- za pomocą jednego komponentu ` Suspense ` .
181
+ w dowolnym miejscu nad "leniwym" (ang. * lazy * ) komponentem. Możesz nawet opakować kilka "leniwych" komponentów
182
+ w jeden komponent ` Suspense ` .
183
183
184
184
``` js
185
185
const OtherComponent = React .lazy (() => import (' ./OtherComponent' ));
@@ -201,10 +201,10 @@ function MyComponent() {
201
201
202
202
### Granice błędów {#error-boundaries}
203
203
204
- Jeśli inny moduł się nie doładuje (na przykład z powodu awarii sieci), spowoduje to błąd.
205
- Możesz je obsługiwać aby zapewnić najlepsze doświadczenia użytkownika i zarządzać ratunkiem z pomocą
206
- [ Granic Błędów ] ( /docs/error-boundaries.html ) . Po utworzeniu granic możesz ich użyć w dowolnym
207
- miejscu nad "leniwymi" komponentami, aby wyświetlić stan błędu gdy sieć jest niedostępna .
204
+ Jeśli inny moduł nie wczyta się poprawnie (na przykład z powodu awarii sieci), spowoduje to błąd.
205
+ Możesz go obsłużyć aby zapewnić użytkownikowi lepsze doświadczenie, a także aby określić sposób obsługi błędu za pomocą
206
+ [ granicy błędu ] ( /docs/error-boundaries.html ) . Taką granicę błędu możesz umieścić w dowolnym
207
+ miejscu ponad "leniwymi" komponentami i, na przykład, aby wyświetlić stan błędu, gdy połączenie z siecią zostanie zerwane .
208
208
209
209
``` js
210
210
import MyErrorBoundary from ' ./MyErrorBoundary' ;
@@ -225,19 +225,18 @@ const MyComponent = () => (
225
225
);
226
226
```
227
227
228
- ## Podział kodu na podstawie szlaku (Route-based) {#route-based-code-splitting}
228
+ ## Podział kodu na podstawie ścieżki URL {#route-based-code-splitting}
229
229
230
- Decydowanie gdzie w twojej aplikacji użyć podziału kodu może być nieco skomplikowane .
231
- Chcesz mieć pewność , że wybierasz miejsca, które równomiernie podzielą twoje pakiety,
232
- ale nie chcesz naruszyć doświadczeń użytkownika.
230
+ Decyzja o tym, w których miejscach podzielić kod aplikacji, może okazać się kłopotliwa .
231
+ Zależy ci na miejscach , że wybierasz miejsca, które równomiernie podzielą twoje pakiety,
232
+ ale nie chcesz zepsuć doświadczeń użytkownika.
233
233
234
- Dobrym miejscem do rozpoczęcia są trasy (routes). Większość osób w sieci jest przywyczajona
235
- do przechodzenia między stronami, które wymaga pewnego czasu. Jest także trend ponownego
236
- renderowania całej strony, więc uzytkownicy raczej nie będą wchodzić w inną interakcje
237
- w tym samym czasie.
234
+ Dobrym punktem startowym są ścieżki (ang. * routes* ) w aplikacji. Większość ludzi korzystających z Internetu przyzwyczajona jest,
235
+ że przejście pomiędzy stronami zajmuje trochę czasu. Dodatkowo, zazwyczaj podczas takiego przejścia spora część ekranu jest renderowana ponownie
236
+ Można więc założyć, że użytkownik nie będzie wykonywał żadnych akcji na interfejsie podczas ładowania.
238
237
239
- Oto przykład konfiguracji dzielenia kodu w twojej aplikacji opartej na trasach za pomoca
240
- bibliotek takich jak [ React Router] ( https://reacttraining.com/react-router/ ) wraz z ` React.lazy ` .
238
+ Oto przykład skonfigurowania dzielenia kodu aplikacji opartego na ścieżkach, przy użyciu
239
+ biblioteki [ React Router] ( https://reacttraining.com/react-router/ ) wraz z funkcją ` React.lazy ` .
241
240
242
241
``` js
243
242
import { BrowserRouter as Router , Route , Switch } from ' react-router-dom' ;
@@ -248,7 +247,7 @@ const About = lazy(() => import('./routes/About'));
248
247
249
248
const App = () => (
250
249
< Router>
251
- < Suspense fallback= {< div> Loading ... < / div> }>
250
+ < Suspense fallback= {< div> Wczytywanie ... < / div> }>
252
251
< Switch>
253
252
< Route exact path= " /" component= {Home}/ >
254
253
< Route path= " /about" component= {About}/ >
@@ -258,12 +257,11 @@ const App = () => (
258
257
);
259
258
```
260
259
261
- ## Eksport nazw {#named-exports}
260
+ ## Eksporty nazwane {#named-exports}
262
261
263
- ` React.lazy ` obecnie obsługuje tylko domyślne eksporty. Jeśli moduł, który chcesz zaimportowac ,
262
+ ` React.lazy ` obecnie obsługuje tylko domyślne eksporty. Jeśli moduł, który chcesz zaimportować ,
264
263
używa nazwanych eksportów, możesz utworzyć moduł pośredni, który ponownie eksportuje je jako
265
- domyślny eksport. Gwarantuje to, utrzymanie działającego drzewa oraz niepobieranie nieuzywanych
266
- komponentów.
264
+ domyślny eksport. Gwarantuje to działanie mechanizmu "tree-shaking" (pol. * potrząsanie drzewem* ), a także zapobiega pobieraniu nieużywanych komponentów.
267
265
268
266
``` js
269
267
// ManyComponents.js
0 commit comments