From 6436cadbb09674cbb2155a5737c8eb1fdcb5b603 Mon Sep 17 00:00:00 2001 From: Maxim Titov Date: Sat, 7 Oct 2023 20:12:57 +0600 Subject: [PATCH] sync with updates --- .../learn/referencing-values-with-refs.md | 10 +++------ src/content/learn/rendering-lists.md | 6 +---- .../learn/start-a-new-react-project.md | 22 +++---------------- src/content/learn/state-as-a-snapshot.md | 6 ----- src/content/reference/react/lazy.md | 18 +++------------ src/content/reference/react/useMemo.md | 4 ---- 6 files changed, 10 insertions(+), 56 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 96d996b32..b9f60723b 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -284,16 +284,12 @@ console.log(ref.current); // 5 ## Рефы и DOM {/*refs-and-the-dom*/} -<<<<<<< HEAD -Вы можете использовать реф в качестве ссылки на любое значение. Однако, на практике рефы часто используются для доступа к DOM-элементам. Например, когда нужно программно сфокусироваться на элементе `input`. Когда вы устанавливаете `ref` через атрибут, `
`, 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 `
`, 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` через атрибут, `
`, React сохранит соответствующий DOM-элемент в качестве значения `myRef.current`. Как только элемент удалён из DOM, React записывает `null` в `myRef.current`. Вы можете больше прочитать об этом в [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs). -- Рефф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них. -- Реф—это обычный JavaScript-объект с единственным свойством `curent`, которое доступно как для чтения, так и для записи. +- Реф—это лазейка для хранения значений, которые не используются при рендере. Чаще всего вы можете обойтись без них. +- Реф—это обычный JavaScript-объект с единственным свойством `current`, которое доступно как для чтения, так и для записи. - Вы можете использовать реф, вызвав хук `useRef` из React. - Рефы позволяют вам сохранить данные между перерисовками компонента, как и в случае с состоянием. - В отличии от состояния, запись нового значения в `ref.current` не спровоцирует повторный рендер компонента. diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 5dd789d62..ecd60febe 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1088,11 +1088,7 @@ export const recipes = [{ #### Список с разделителем {/*list-with-a-separator*/} -<<<<<<< HEAD -Данный пример рендерит известное хокку Кацусики Хокусая, каждая строка обернута в тег `

`. Ваша задача -- вставить разделитель `


` между каждым параграфом. Ваша структура должна выглядеть так: -======= -This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `

` tag. Your job is to insert an `


` separator between each paragraph. Your resulting structure should look like this: ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Данный пример рендерит известное хокку Татибана Хокуси, каждая строка обернута в тег `

`. Ваша задача -- вставить разделитель `


` между каждым параграфом. Ваша структура должна выглядеть так: ```js
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 2ae6f0a7f..26aafc04f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -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*/} @@ -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), который не требует сервера. - - - -Маршрутизатор приложения Next.js **находится в бета-разработке и не рекомендуется к использованию в продакшене** (апрель 2023). Если вы хотите поэкспериментировать с новыми возможностями в существующем проекте, [воспользуйтесь руководством по миграции](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - - -======= -**[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), который не требует сервера. diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index 6ff8ff68d..d64020e69 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -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 diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 0c82bc56e..a1dd4a8dd 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -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*/} @@ -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)-компонент. --- @@ -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) который должен поддерживаться вашим бандлером или фреймворком. Использование этого подхода требует, чтобы импортируемый компонент был экспортирован с помощью экспорта по умолчанию. Теперь, когда код вашего компонента загружается по запросу, вам также необходимо указать, что должно отображаться во время его загрузки. Это можно сделать путем оборачивания ленивого компонента или его родителя в границы [``](/reference/react/Suspense): diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 7ac118e8e..ac8dd4554 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -646,11 +646,7 @@ JSX-узел `` является простым о Переключение между вкладками ощущается таким медленным, потому что оно вынуждает замедленный компонент `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