Skip to content

Commit 6436cad

Browse files
committed
sync with updates
1 parent 1318fb1 commit 6436cad

File tree

6 files changed

+10
-56
lines changed

6 files changed

+10
-56
lines changed

src/content/learn/referencing-values-with-refs.md

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -284,16 +284,12 @@ console.log(ref.current); // 5
284284

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

287-
<<<<<<< HEAD
288-
Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к DOM-элементам. Например, когда нужно программно сфокусироваться на элементе `input`. Когда вы устанавливаете `ref` через атрибут, `<div ref={myRef}>`, React сохранит соответствующий DOM-элемент в качестве значения `myRef.current`. Вы можете больше прочитать об этом в [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs).
289-
=======
290-
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)
291-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
287+
Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к 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).
292288

293289
<Recap>
294290

295-
- Рефф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них.
296-
- Реф—это обычный JavaScript-объект с единственным свойством `curent`, которое доступно как для чтения, так и для записи.
291+
- Реф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них.
292+
- Реф—это обычный JavaScript-объект с единственным свойством `current`, которое доступно как для чтения, так и для записи.
297293
- Вы можете использовать реф, вызвав хук `useRef` из React.
298294
- Рефы позволяют вам сохранить данные между перерисовками компонента, как и в случае с состоянием.
299295
- В отличии от состояния, запись нового значения в `ref.current` не спровоцирует повторный рендер компонента.

src/content/learn/rendering-lists.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1088,11 +1088,7 @@ export const recipes = [{
10881088

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

1091-
<<<<<<< HEAD
1092-
Данный пример рендерит известное хокку Кацусики Хокусая, каждая строка обернута в тег `<p>`. Ваша задача -- вставить разделитель `<hr />` между каждым параграфом. Ваша структура должна выглядеть так:
1093-
=======
1094-
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:
1095-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
1091+
Данный пример рендерит известное хокку Татибана Хокуси, каждая строка обернута в тег `<p>`. Ваша задача -- вставить разделитель `<hr />` между каждым параграфом. Ваша структура должна выглядеть так:
10961092

10971093
```js
10981094
<article>

src/content/learn/start-a-new-react-project.md

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,7 @@ npx create-next-app@latest
2626

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

29-
<<<<<<< HEAD
30-
Команда [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) могут быть опубликованы на любом статическом хостинге.
31-
=======
32-
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.
33-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
29+
Команда [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), который не требует сервера.
3430

3531
### Remix {/*remix*/}
3632

@@ -93,21 +89,9 @@ npx create-expo-app
9389

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

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

99-
Команда [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), который не требует сервера.
100-
101-
<Pitfall>
102-
103-
Маршрутизатор приложения Next.js **находится в бета-разработке и не рекомендуется к использованию в продакшене** (апрель 2023). Если вы хотите поэкспериментировать с новыми возможностями в существующем проекте, [воспользуйтесь руководством по миграции](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
104-
105-
</Pitfall>
106-
=======
107-
**[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.
108-
109-
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.
110-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
94+
Команда [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), который не требует сервера.
11195

11296
<DeepDive>
11397

src/content/learn/state-as-a-snapshot.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,9 @@ label, textarea { margin-bottom: 10px; display: block; }
7777

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

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

9084
<IllustrationBlock sequential>
9185
<Illustration caption="React вызывает функцию" src="/images/docs/illustrations/i_render1.png" />

src/content/reference/react/lazy.md

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
3131

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

34-
<<<<<<< HEAD
35-
* `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.
36-
=======
37-
* `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.
38-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
34+
* `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.
3935

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

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

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

54-
<<<<<<< HEAD
55-
Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В конечном итоге он вернётся к действительному React компоненту, например к функции, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef) компоненту.
56-
=======
57-
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.
58-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
50+
Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В конечном итоге он вернёт объект со свойством `.default`, принимающим валидный React-компонент, например функцию, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef)-компонент.
5951

6052
---
6153

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

80-
<<<<<<< HEAD
81-
Этот код опирается на [динамический `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) который должен поддерживаться вашим бандлером или фреймворком.
82-
=======
83-
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.
84-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
72+
Этот код опирается на [динамический `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) который должен поддерживаться вашим бандлером или фреймворком. Использование этого подхода требует, чтобы импортируемый компонент был экспортирован с помощью экспорта по умолчанию.
8573

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

src/content/reference/react/useMemo.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -646,11 +646,7 @@ JSX-узел `<List items={visibleTodos} />` является простым о
646646

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

649-
<<<<<<< HEAD
650649
Затем попробуйте переключить тему. **Благодаря `useMemo` в связке с [`memo`](/reference/react/memo) это происходит быстро, несмотря на искусственное замедление.** Поскольку ни `todos`, ни `tab`, указанные как зависимости в `useMemo`, не изменились с предыдущего рендера, то массив `visibleTodos` остался прежним, и компонент `List` пропустил ререндер.
651-
=======
652-
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.
653-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
654650

655651
<Sandpack>
656652

0 commit comments

Comments
 (0)