Skip to content

Commit 1c5bb0d

Browse files
committed
translate lazy page
1 parent b72f7a8 commit 1c5bb0d

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

beta/src/content/apis/react/lazy.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: lazy
44

55
<Intro>
66

7-
`lazy` lets you defer loading component's code until it is rendered for the first time.
7+
`lazy` te permite diferir el código del componente de carga hasta que se renderice por primera vez.
88

99
```js
1010
const SomeComponent = lazy(load)
@@ -16,36 +16,36 @@ const SomeComponent = lazy(load)
1616

1717
---
1818

19-
## Usage {/*usage*/}
19+
## Uso {/*usage*/}
2020

21-
### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/}
21+
### Componentes Lazy-loading con Suspense {/*suspense-for-code-splitting*/}
2222

23-
Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration:
23+
Por lo general, importas componentes con la declaración estática [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import):
2424

2525
```js
2626
import MarkdownPreview from './MarkdownPreview.js';
2727
```
2828

29-
To defer loading this component's code until it's rendered for the first time, replace this import with:
29+
Para diferir la carga del código de este componente hasta que se renderice por primera vez, reemplaza esta importación con:
3030

3131
```js
3232
import { lazy } from 'react';
3333

3434
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
3535
```
3636

37-
This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework.
37+
Este código se basa en [`import()` dinámico,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) que puede requerir el apoyo del paquete o del framework.
3838

39-
Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [`<Suspense>`](/apis/react/Suspense) boundary:
39+
Ahora que el código de tu componente se carga a demanda, también debes especificar qué debe mostrarse mientras se carga. Puedes hacer esto envolviendo el componente lazy o cualquiera de sus padres en un [`<Suspense>`](/apis/react/Suspense):
4040

4141
```js {1,4}
4242
<Suspense fallback={<Loading />}>
4343
<h2>Preview</h2>
4444
<MarkdownPreview />
45-
</Suspense>
45+
</Suspense>
4646
```
4747

48-
In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox:
48+
En este ejemplo, el código para `MarkdownPreview` no se cargará hasta que intentes renderizarlo. Si `MarkdownPreview` aún no se ha cargado, `Loading` se mostrará en su lugar. Intenta marcar el checkbox:
4949

5050
<Sandpack>
5151

@@ -139,49 +139,49 @@ body {
139139

140140
</Sandpack>
141141

142-
This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview` will be cached, so there will be no loading state displayed. To see the loading state again, click "Reset" on the sandbox.
142+
Esta demostración se carga con un retraso artificial. La próxima vez que desmarques y marques el checkbox, `Preview` se almacenará en caché, por lo que no se mostrará ningún estado de carga. Para ver nuevamente el estado de carga, haz clic en “ Restablecer ” en el sandbox.
143143

144-
[Learn more about managing loading states with Suspense.](/apis/react/Suspense)
144+
[Obtenga más información sobre cómo administrar los estados de carga con Suspense.](/apis/react/Suspense)
145145

146146
---
147147

148-
## Reference {/*reference*/}
148+
## Referencia {/*reference*/}
149149

150150
### `lazy(load)` {/*lazy*/}
151151

152-
Call `lazy` outside your components to declare a lazy-loaded React component:
152+
Llama a `lazy` fuera de tus componentes para declarar un componente lazy-loaded:
153153

154154
```js
155155
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
156156
```
157157

158-
#### Parameters {/*parameters*/}
158+
#### Parámetros {/*parameters*/}
159159

160-
* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason to let the closest Error Boundary above handle it.
160+
- `load`: Una función que devuelve una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o algún otro _thenable_ (un objeto tipo Promise con un método `then`). React no llamará a `load` hasta la primera vez que intentes renderizar el componente devuelto. Después de que React llame por primera vez a `load`, esperará a que se resuelva, y entonces renderizará el valor resuelto como un componente React. Tanto la Promesa devuelta como el valor resuelto de la Promesa serán almacenados en caché, por lo que React no llamará a `load` más de una vez. Si la Promesa se rechaza, React `lanza` la razón de rechazo para dejar que el Error Boundary más cercano lo maneje.
161161

162162
#### Returns {/*returns*/}
163163

164-
`lazy` returns a React component that you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [`<Suspense>`](/apis/react/Suspense) to display a loading indicator while it's loading.
164+
`lazy` devuelve un componente React que puedes renderizar en tu árbol. Mientras el código del componente lazy sigue cargando, el intento de renderizarlo se _suspenderá._ Usa [`<Suspense>`](/apis/react/Suspense) para mostrar un indicador de carga mientras se carga.
165165

166166
---
167167

168-
### `load` function {/*load*/}
168+
### Función `load` {/*load*/}
169169

170-
#### Parameters {/*load-parameters*/}
170+
#### Parámetros {/*load-parameters*/}
171171

172-
`load` receives no parameters.
172+
`load` no recibe parámetros.
173173

174174
#### Returns {/*load-returns*/}
175175

176-
You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/api/react/memo), or a [`forwardRef`](/api/react/forwardRef) component.
176+
Necesitas devolver una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o algún otro _thenable_ (un objeto tipo Promise con un método `then`). Eventualmente debes resolver un tipo de componente React válido, como una función, [`memo`](/api/react/memo), o un componente [`forwardRef`](/api/react/forwardRef).
177177

178178
---
179179

180-
## Troubleshooting {/*troubleshooting*/}
180+
## Solución de problemas {/*troubleshooting*/}
181181

182-
### My `lazy` component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/}
182+
### Mi estado del componente `lazy` se restablece inesperadamente {/*my-lazy-components-state-gets-reset-unexpectedly*/}
183183

184-
Do not declare `lazy` components *inside* other components:
184+
No declarar componentes `lazy` _dentro_ de otros componentes:
185185

186186
```js {4-5}
187187
import { lazy } from 'react';
@@ -193,7 +193,7 @@ function Editor() {
193193
}
194194
```
195195

196-
Instead, always declare them at the top level of your module:
196+
En cambio, declaralos siempre en el nivel superior de tu módulo:
197197

198198
```js {3-4}
199199
import { lazy } from 'react';

0 commit comments

Comments
 (0)