Skip to content

Commit

Permalink
sync with updates
Browse files Browse the repository at this point in the history
  • Loading branch information
titovmx committed Oct 7, 2023
1 parent 1318fb1 commit 6436cad
Show file tree
Hide file tree
Showing 6 changed files with 10 additions and 56 deletions.
10 changes: 3 additions & 7 deletions src/content/learn/referencing-values-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -284,16 +284,12 @@ console.log(ref.current); // 5

## Рефы и DOM {/*refs-and-the-dom*/}

<<<<<<< HEAD
Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к DOM-элементам. Например, когда нужно программно сфокусироваться на элементе `input`. Когда вы устанавливаете `ref` через атрибут, `<div ref={myRef}>`, React сохранит соответствующий DOM-элемент в качестве значения `myRef.current`. Вы можете больше прочитать об этом в [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs).
=======
You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к DOM-элементам. Например, когда нужно программно сфокусироваться на элементе `input`. Когда вы устанавливаете `ref` через атрибут, `<div ref={myRef}>`, React сохранит соответствующий DOM-элемент в качестве значения `myRef.current`. Как только элемент удалён из DOM, React записывает `null` в `myRef.current`. Вы можете больше прочитать об этом в [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs).

<Recap>

- Рефф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них.
- Реф—это обычный JavaScript-объект с единственным свойством `curent`, которое доступно как для чтения, так и для записи.
- Реф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них.
- Реф—это обычный JavaScript-объект с единственным свойством `current`, которое доступно как для чтения, так и для записи.
- Вы можете использовать реф, вызвав хук `useRef` из React.
- Рефы позволяют вам сохранить данные между перерисовками компонента, как и в случае с состоянием.
- В отличии от состояния, запись нового значения в `ref.current` не спровоцирует повторный рендер компонента.
Expand Down
6 changes: 1 addition & 5 deletions src/content/learn/rendering-lists.md
Original file line number Diff line number Diff line change
Expand Up @@ -1088,11 +1088,7 @@ export const recipes = [{

#### Список с разделителем {/*list-with-a-separator*/}

<<<<<<< HEAD
Данный пример рендерит известное хокку Кацусики Хокусая, каждая строка обернута в тег `<p>`. Ваша задача -- вставить разделитель `<hr />` между каждым параграфом. Ваша структура должна выглядеть так:
=======
This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Данный пример рендерит известное хокку Татибана Хокуси, каждая строка обернута в тег `<p>`. Ваша задача -- вставить разделитель `<hr />` между каждым параграфом. Ваша структура должна выглядеть так:

```js
<article>
Expand Down
22 changes: 3 additions & 19 deletions src/content/learn/start-a-new-react-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,7 @@ npx create-next-app@latest

Узнайте больше о Next.js из [официальной документации.](https://nextjs.org/learn/foundations/about-nextjs)

<<<<<<< HEAD
Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. [Полностью статические Next.js-приложения](https://nextjs.org/docs/advanced-features/static-html-export) могут быть опубликованы на любом статическом хостинге.
=======
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/app/building-your-application/deploying) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает [статический экспорт](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), который не требует сервера.

### Remix {/*remix*/}

Expand Down Expand Up @@ -93,21 +89,9 @@ npx create-expo-app

### Next.js (Маршрутизатор приложения) {/*nextjs-app-router*/}

<<<<<<< HEAD
**[Маршрутизатор приложения Next.js (Next.js App Router)](https://beta.nextjs.org/docs/getting-started) -- обновлённый API Next.js, отвечающий тому, как команда React видит архитектуру фулстек-приложений сегодня.** Маршрутизатор позволяет загружать данные в асинхронных компонентах на сервере или во время сборки.
**[Маршрутизатор приложения Next.js (Next.js App Router)](https://nextjs.org/docs/getting-started) -- обновлённый API Next.js, отвечающий тому, как команда React видит архитектуру фулстек-приложений сегодня.** Маршрутизатор позволяет загружать данные в асинхронных компонентах на сервере или во время сборки.

Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/deployment) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает [статический экспорт](https://beta.nextjs.org/docs/configuring/static-export), который не требует сервера.

<Pitfall>

Маршрутизатор приложения Next.js **находится в бета-разработке и не рекомендуется к использованию в продакшене** (апрель 2023). Если вы хотите поэкспериментировать с новыми возможностями в существующем проекте, [воспользуйтесь руководством по миграции](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).

</Pitfall>
=======
**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.

Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Команда [Vercel](https://vercel.com/) постоянно улучшает Next.js. Вы можете [развернуть Next.js-приложение](https://nextjs.org/docs/app/building-your-application/deploying) на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает [статический экспорт](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), который не требует сервера.

<DeepDive>

Expand Down
6 changes: 0 additions & 6 deletions src/content/learn/state-as-a-snapshot.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,9 @@ label, textarea { margin-bottom: 10px; display: block; }

Когда React повторно рендерит компонент:

<<<<<<< HEAD
1. React вызывает ваш компонент как функцию.
2. Функция возвращает новый снимок JSX.
3. Далее React обновляет экран в соответствии с данными, которые были возвращены со снимком JSX.
=======
1. React calls your function again.
2. Your function returns a new JSX snapshot.
3. React then updates the screen to match the snapshot your function returned.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909

<IllustrationBlock sequential>
<Illustration caption="React вызывает функцию" src="/images/docs/illustrations/i_render1.png" />
Expand Down
18 changes: 3 additions & 15 deletions src/content/reference/react/lazy.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

#### Параметры {/*parameters*/}

<<<<<<< HEAD
* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытаетесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React-компонент. Возвращаемый промис и разрешенное значение промиса будут кэшироваться, поэтому React не будет вызывать `load` более одного раза. Если Promise отклоняется, React укажет причину в ближайшем Error Boundary.
=======
* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *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's `.default` 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 for the nearest Error Boundary to handle.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытаетесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение `.default` как React-компонент. Возвращаемый промис и разрешённое значение промиса будут кэшироваться, поэтому React не будет вызывать `load` более одного раза. Если Promise отклоняется, React укажет причину в ближайшем Error Boundary.

#### Возвращаемое значение {/*returns*/}

Expand All @@ -51,11 +47,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

#### Возвращаемое значение {/*load-returns*/}

<<<<<<< HEAD
Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В конечном итоге он вернётся к действительному React компоненту, например к функции, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef) компоненту.
=======
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 an object whose `.default` property is a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В конечном итоге он вернёт объект со свойством `.default`, принимающим валидный React-компонент, например функцию, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef)-компонент.

---

Expand All @@ -77,11 +69,7 @@ import { lazy } from 'react';
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```

<<<<<<< HEAD
Этот код опирается на [динамический `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) который должен поддерживаться вашим бандлером или фреймворком.
=======
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. Using this pattern requires that the lazy component you're importing was exported as the `default` export.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
Этот код опирается на [динамический `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) который должен поддерживаться вашим бандлером или фреймворком. Использование этого подхода требует, чтобы импортируемый компонент был экспортирован с помощью экспорта по умолчанию.

Теперь, когда код вашего компонента загружается по запросу, вам также необходимо указать, что должно отображаться во время его загрузки. Это можно сделать путем оборачивания ленивого компонента или его родителя в границы [`<Suspense>`](/reference/react/Suspense):

Expand Down
4 changes: 0 additions & 4 deletions src/content/reference/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -646,11 +646,7 @@ JSX-узел `<List items={visibleTodos} />` является простым о

Переключение между вкладками ощущается таким медленным, потому что оно вынуждает замедленный компонент `List` ререндериться. Такое поведение ожидаемо, поскольку проп `tab` изменился, и новые данные необходимо отобразить на экране.

<<<<<<< HEAD
Затем попробуйте переключить тему. **Благодаря `useMemo` в связке с [`memo`](/reference/react/memo) это происходит быстро, несмотря на искусственное замедление.** Поскольку ни `todos`, ни `tab`, указанные как зависимости в `useMemo`, не изменились с предыдущего рендера, то массив `visibleTodos` остался прежним, и компонент `List` пропустил ререндер.
=======
Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909

<Sandpack>

Expand Down

0 comments on commit 6436cad

Please sign in to comment.