From 36db1c04d699b8a748c84f635c9107497b8445b5 Mon Sep 17 00:00:00 2001 From: "translate-react-bot[bot]" <251169733+translate-react-bot[bot]@users.noreply.github.com> Date: Wed, 4 Feb 2026 15:06:45 +0000 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20translate=20`preserving-and-resetti?= =?UTF-8?q?ng-state.md`=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/preserving-and-resetting-state.md | 253 +++++++++--------- 1 file changed, 126 insertions(+), 127 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 11d398d23f..e6fc967b8b 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1,28 +1,28 @@ --- -title: Preserving and Resetting State +title: Сохранение и сброс состояния --- -State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders. +Состояние изолировано между компонентами. React отслеживает, какому компоненту принадлежит состояние, на основе его положения в дереве рендеринга. Вы можете контролировать, когда сохранять состояние, а когда сбросить его между повторными рендерами. -* When React chooses to preserve or reset the state -* How to force React to reset component's state -* How keys and types affect whether the state is preserved +* Когда React выбирает сохранение или сброс состояния +* Как заставить React сбросить состояние компонента +* Как ключи и типы влияют на сохранение состояния -## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/} +## Состояние привязано к позиции в дереве рендеринга {/*state-is-tied-to-a-position-in-the-tree*/} -React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI. +React строит [деревья рендеринга](learn/understanding-your-ui-as-a-tree#the-render-tree) для структуры компонентов в вашем пользовательском интерфейсе. -When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree. +Когда вы даете компоненту состояние, вы можете подумать, что состояние "живет" внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которую он хранит, с правильным компонентом по его месту в дереве рендеринга. -Here, there is only one `` JSX tag, but it's rendered at two different positions: +Здесь есть только один JSX-тег ``, но он рендерится в двух разных позициях: @@ -86,23 +86,23 @@ label { -Here's how these look as a tree: +Вот как это выглядит в виде дерева: - + -React tree +Дерево React -**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works. +**Это два отдельных счетчика, потому что каждый рендерится в своей собственной позиции в дереве.** Обычно вам не нужно думать об этих позициях, чтобы использовать React, но это может быть полезно для понимания того, как он работает. -In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states. +В React каждый компонент на экране имеет полностью изолированное состояние. Например, если вы рендерите два компонента `Counter` бок о бок, каждый из них получит свое собственное, независимое состояние `score` и `hover`. -Try clicking both counters and notice they don't affect each other: +Попробуйте нажать на оба счетчика и заметьте, что они не влияют друг на друга: @@ -160,21 +160,21 @@ function Counter() { -As you can see, when one counter is updated, only the state for that component is updated: +Как вы видите, когда обновляется один счетчик, обновляется только состояние этого компонента: - + -Updating state +Обновление состояния -React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again: +React будет сохранять состояние до тех пор, пока вы рендерите один и тот же компонент в одной и той же позиции. Чтобы увидеть это, увеличьте оба счетчика, затем удалите второй компонент, сняв флажок "Render the second counter", а затем добавьте его снова, установив флажок: @@ -248,35 +248,35 @@ label { -Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state. +Заметьте, что как только вы перестаете рендерить второй счетчик, его состояние полностью исчезает. Это потому, что когда React удаляет компонент, он уничтожает его состояние. - + -Deleting a component +Удаление компонента -When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM. +Когда вы ставите галочку "Render the second counter", второй `Counter` и его состояние инициализируются с нуля (`score = 0`) и добавляются в DOM. - + -Adding a component +Добавление компонента -**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state. +**React сохраняет состояние компонента до тех пор, пока он рендерится на своей позиции в дереве UI.** Если он удаляется, или другой компонент рендерится на той же позиции, React отбрасывает его состояние. -## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/} +## Тот же компонент на той же позиции сохраняет состояние {/*same-component-at-the-same-position-preserves-state*/} -In this example, there are two different `` tags: +В этом примере есть два разных тега ``: @@ -361,24 +361,24 @@ label { -When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `` as the first child of the `div` returned from the root `App` component: +Когда вы ставите или снимаете галочку с чекбокса, состояние счетчика не сбрасывается. Независимо от того, является ли `isFancy` `true` или `false`, у вас всегда есть `` как первый дочерний элемент `div`, возвращаемый корневым компонентом `App`: - + -Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position +Обновление состояния `App` не сбрасывает `Counter`, потому что `Counter` остается на той же позиции -It's the same component at the same position, so from React's perspective, it's the same counter. +Это тот же компонент на той же позиции, поэтому с точки зрения React это тот же счетчик. -Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `` JSX tags inside and outside the `if`: +Помните, что **именно позиция в дереве UI — а не в разметке JSX — имеет значение для React!** Этот компонент имеет два `return` с разными JSX-тегами `` внутри и вне `if`: @@ -476,15 +476,15 @@ label { -You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return. +Вы можете ожидать, что состояние сбросится при установке флажка, но это не так! Это потому, что **оба этих тега `` рендерятся в одной и той же позиции.** React не знает, где вы размещаете условия в своей функции. Все, что он "видит", — это дерево, которое вы возвращаете. -In both cases, the `App` component returns a `
` with `` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic. +В обоих случаях компонент `App` возвращает `
` с `` в качестве первого дочернего элемента. Для React эти два счетчика имеют один и тот же "адрес": первый дочерний элемент первого дочернего элемента корня. Именно так React сопоставляет их между предыдущим и следующим рендером, независимо от того, как вы структурируете свою логику. -## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/} +## Разные компоненты на одной позиции сбрасывают состояние {/*different-components-at-the-same-position-reset-state*/} -In this example, ticking the checkbox will replace `` with a `

`: +В этом примере установка флажка заменит `` на `

`: @@ -561,13 +561,13 @@ label { -Here, you switch between _different_ component types at the same position. Initially, the first child of the `

` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state. +Здесь вы переключаетесь между _разными_ типами компонентов на одной и той же позиции. Изначально первый дочерний элемент `
` содержал `Counter`. Но когда вы заменили его на `p`, React удалил `Counter` из дерева UI и уничтожил его состояние. - + -When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added +Когда `Counter` меняется на `p`, `Counter` удаляется, а `p` добавляется. @@ -575,15 +575,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added - + -When switching back, the `p` is deleted and the `Counter` is added +При переключении обратно `p` удаляется, а `Counter` добавляется. -Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox: +Кроме того, **когда вы рендерите другой компонент на той же позиции, это сбрасывает состояние всего поддерева.** Чтобы увидеть, как это работает, увеличьте счетчик, а затем установите флажок: @@ -672,13 +672,13 @@ label { -The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +Состояние счетчика сбрасывается при нажатии на флажок. Хотя вы рендерите `Counter`, первый дочерний элемент `div` меняется с `section` на `div`. Когда дочерний `section` был удален из DOM, все дерево под ним (включая `Counter` и его состояние) также было уничтожено. - + -When `section` changes to `div`, the `section` is deleted and the new `div` is added +Когда `section` меняется на `div`, `section` удаляется, а новый `div` добавляется. @@ -686,21 +686,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a - + -When switching back, the `div` is deleted and the new `section` is added +При переключении обратно `div` удаляется, а новый `section` добавляется. -As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree. +Как правило, **если вы хотите сохранить состояние между повторными рендерами, структура вашего дерева должна «соответствовать»** от одного рендера к другому. Если структура отличается, состояние уничтожается, потому что React уничтожает состояние при удалении компонента из дерева. -This is why you should not nest component function definitions. +Вот почему вы не должны вкладывать определения функций компонентов. -Here, the `MyTextField` component function is defined *inside* `MyComponent`: +Здесь функция компонента `MyTextField` определена *внутри* `MyComponent`: @@ -734,14 +734,13 @@ export default function MyComponent() { - -Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.** +Каждый раз, когда вы нажимаете кнопку, состояние ввода исчезает! Это происходит потому, что для каждого рендера `MyComponent` создается *разная* функция `MyTextField`. Вы рендерите *разный* компонент на той же позиции, поэтому React сбрасывает все состояние ниже. Это приводит к ошибкам и проблемам с производительностью. Чтобы избежать этой проблемы, **всегда объявляйте функции компонентов на верхнем уровне и не вкладывайте их определения.** -## Resetting state at the same position {/*resetting-state-at-the-same-position*/} +## Сброс состояния на той же позиции {/*resetting-state-at-the-same-position*/} -By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn: +По умолчанию React сохраняет состояние компонента, пока он находится на той же позиции. Обычно это именно то, чего вы хотите, поэтому это разумное поведение по умолчанию. Но иногда вам может понадобиться сбросить состояние компонента. Рассмотрим приложение, которое позволяет двум игрокам отслеживать свои очки в каждом раунде: @@ -811,19 +810,19 @@ h1 { -Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed. +В настоящее время при смене игрока очки сохраняются. Два `Counter` появляются на одной и той же позиции, поэтому React считает их *одним и тем же* `Counter`, у которого изменился проп `person`. -But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah. +Но концептуально в этом приложении это должны быть два отдельных счетчика. Они могут появляться в одном и том же месте в пользовательском интерфейсе, но один — это счетчик для Тейлор, а другой — для Сары. -There are two ways to reset state when switching between them: +Есть два способа сбросить состояние при переключении между ними: -1. Render components in different positions -2. Give each component an explicit identity with `key` +1. Отображать компоненты в разных позициях +2. Присвоить каждому компоненту явный идентификатор с помощью `key` -### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/} +### Вариант 1: Отображение компонента в разных позициях {/*option-1-rendering-a-component-in-different-positions*/} -If you want these two `Counter`s to be independent, you can render them in two different positions: +Если вы хотите, чтобы эти два `Counter` были независимыми, вы можете отобразить их в двух разных позициях: @@ -894,42 +893,42 @@ h1 { -* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty. -* When you click the "Next player" button the first position clears but the second one now contains a `Counter`. +* Изначально `isPlayerA` равно `true`. Поэтому первая позиция содержит состояние `Counter`, а вторая пуста. +* Когда вы нажимаете кнопку "Next player", первая позиция очищается, но вторая теперь содержит `Counter`. - + -Initial state +Начальное состояние - + -Clicking "next" +Нажатие "next" - + -Clicking "next" again +Повторное нажатие "next" -Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button. +Состояние каждого `Counter` уничтожается каждый раз, когда он удаляется из DOM. Вот почему они сбрасываются каждый раз, когда вы нажимаете кнопку. -This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX. +Это решение удобно, когда у вас есть всего несколько независимых компонентов, отображаемых в одном месте. В этом примере их всего два, поэтому нетрудно отобразить оба отдельно в JSX. -### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/} +### Вариант 2: Сброс состояния с помощью ключа {/*option-2-resetting-state-with-a-key*/} -There is also another, more generic, way to reset a component's state. +Существует также другой, более универсальный способ сбросить состояние компонента. -You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree! +Возможно, вы видели `key`, когда [рендерили списки.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Ключи предназначены не только для списков! Вы можете использовать ключи, чтобы заставить React различать любые компоненты. По умолчанию React использует порядок внутри родителя ("первый счетчик", "второй счетчик") для различения компонентов. Но ключи позволяют вам сообщить React, что это не просто *первый* счетчик или *второй* счетчик, а конкретный счетчик — например, счетчик *Тейлор*. Таким образом, React будет знать счетчик *Тейлор*, где бы он ни появился в дереве! -In this example, the two ``s don't share state even though they appear in the same place in JSX: +В этом примере два `` не разделяют состояние, хотя они и появляются в одном и том же месте в JSX: @@ -999,7 +998,7 @@ h1 { -Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:** +Переключение между Тейлор и Сарой не сохраняет состояние. Это потому, что **вы дали им разные `key`**: ```js {isPlayerA ? ( @@ -1009,19 +1008,19 @@ Switching between Taylor and Sarah does not preserve the state. This is because )} ``` -Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over. +Указание `key` говорит React использовать сам `key` как часть позиции, вместо их порядка внутри родителя. Вот почему, даже несмотря на то, что вы отображаете их в одном и том же месте в JSX, React считает их двумя разными счетчиками, и поэтому они никогда не будут разделять состояние. Каждый раз, когда счетчик появляется на экране, его состояние создается. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними снова и снова сбрасывает их состояние. -Remember that keys are not globally unique. They only specify the position *within the parent*. +Помните, что ключи не являются глобально уникальными. Они только указывают позицию *внутри родителя*. -### Resetting a form with a key {/*resetting-a-form-with-a-key*/} +### Сброс формы с помощью ключа {/*resetting-a-form-with-a-key*/} -Resetting state with a key is particularly useful when dealing with forms. +Сброс состояния с помощью ключа особенно полезен при работе с формами. -In this chat app, the `` component contains the text input state: +В этом приложении чата компонент `` содержит состояние текстового поля: @@ -1116,17 +1115,17 @@ textarea { -Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `` is rendered at the same position in the tree. +Попробуйте ввести что-нибудь в поле ввода, а затем нажмите «Alice» или «Bob», чтобы выбрать другого получателя. Вы заметите, что состояние ввода сохраняется, потому что `` отображается в той же позиции в дереве. -**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`: +**Во многих приложениях это может быть желаемым поведением, но не в приложении чата!** Вы не хотите отправлять сообщение, которое вы уже напечатали, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте `key`: ```js ``` -This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them. +Это гарантирует, что при выборе другого получателя компонент `Chat` будет воссоздан с нуля, включая любое состояние в дереве под ним. React также пересоздаст DOM-элементы вместо их повторного использования. -Now switching the recipient always clears the text field: +Теперь при смене получателя поле ввода всегда очищается: @@ -1223,24 +1222,24 @@ textarea { -#### Preserving state for removed components {/*preserving-state-for-removed-components*/} +#### Сохранение состояния для удаленных компонентов {/*preserving-state-for-removed-components*/} -In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible: +В реальном приложении чата вы, вероятно, захотите восстановить состояние ввода, когда пользователь снова выберет предыдущего получателя. Есть несколько способов сохранить состояние "живым" для компонента, который больше не виден: -- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes. -- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution. -- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too. +- Вы можете отобразить _все_ чаты вместо одного текущего, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние будет сохранено. Это решение отлично подходит для простых пользовательских интерфейсов. Но оно может стать очень медленным, если скрытые деревья большие и содержат много DOM-узлов. +- Вы можете [поднять состояние вверх](/learn/sharing-state-between-components) и хранить ожидающее сообщение для каждого получателя в родительском компоненте. Таким образом, когда дочерние компоненты удаляются, это не имеет значения, потому что именно родитель сохраняет важную информацию. Это самое распространенное решение. +- Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, захотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы компонент `Chat` инициализировал свое состояние, читая из [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), и сохранял черновики туда же. -No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `` tree based on the current recipient. +Независимо от выбранной вами стратегии, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл присвоить `key` дереву ``, основанному на текущем получателе. -- React keeps state for as long as the same component is rendered at the same position. -- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX. -- You can force a subtree to reset its state by giving it a different key. -- Don't nest component definitions, or you'll reset state by accident. +- React сохраняет состояние до тех пор, пока тот же компонент отображается в той же позиции. +- Состояние не хранится в JSX-тегах. Оно связано с позицией в дереве, куда вы поместили этот JSX. +- Вы можете принудительно сбросить состояние поддерева, присвоив ему другой ключ. +- Не вкладывайте определения компонентов друг в друга, иначе вы случайно сбросите состояние. @@ -1248,9 +1247,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct -#### Fix disappearing input text {/*fix-disappearing-input-text*/} +#### Исправление исчезающего текста ввода {/*fix-disappearing-input-text*/} -This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text. +Этот пример показывает сообщение при нажатии кнопки. Однако нажатие кнопки также случайно сбрасывает ввод. Почему это происходит? Исправьте это так, чтобы нажатие кнопки не сбрасывало текст ввода. @@ -1299,9 +1298,9 @@ textarea { display: block; margin: 10px 0; } -The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `
`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes. +Проблема в том, что `Form` отображается в разных позициях. В ветке `if` он является вторым дочерним элементом `
`, а в ветке `else` — первым. Поэтому тип компонента в каждой позиции меняется. Первая позиция меняется между хранением `p` и `Form`, а вторая позиция меняется между хранением `Form` и `button`. React сбрасывает состояние каждый раз, когда тип компонента изменяется. -The easiest solution is to unify the branches so that `Form` always renders in the same position: +Самое простое решение — унифицировать ветки, чтобы `Form` всегда отображался в одной и той же позиции: @@ -1347,7 +1346,7 @@ textarea { display: block; margin: 10px 0; } -Technically, you could also add `null` before `
` in the `else` branch to match the `if` branch structure: +Технически вы также можете добавить `null` перед `` в ветке `else`, чтобы соответствовать структуре ветки `if`: @@ -1395,19 +1394,19 @@ textarea { display: block; margin: 10px 0; } -This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`. +Таким образом, `Form` всегда является вторым дочерним элементом, поэтому он остается на том же месте и сохраняет свое состояние. Но этот подход гораздо менее очевиден и создает риск того, что кто-то другой удалит этот `null`. -#### Swap two form fields {/*swap-two-form-fields*/} +#### Поменять местами два поля формы {/*swap-two-form-fields*/} -This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field. +Эта форма позволяет вводить имя и фамилию. Она также имеет флажок, который определяет, какое поле идет первым. При установке флажка поле "Фамилия" появится перед полем "Имя". -It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order. +Это почти работает, но есть ошибка. Если вы заполните поле "Имя" и установите флажок, текст останется в первом поле (которое теперь "Фамилия"). Исправьте это так, чтобы текст ввода также перемещался при изменении порядка. -It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders? +Кажется, что для этих полей их позиция внутри родителя недостаточна. Есть ли способ сообщить React, как сопоставить состояние между рендерами? @@ -1471,7 +1470,7 @@ label { display: block; margin: 10px 0; } -Give a `key` to both `` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `` even if their order within the parent changes: +Присвойте `key` обоим компонентам `` в обеих ветках `if` и `else`. Это говорит React, как "сопоставить" правильное состояние для каждого ``, даже если их порядок внутри родителя изменится: @@ -1533,11 +1532,11 @@ label { display: block; margin: 10px 0; } -#### Reset a detail form {/*reset-a-detail-form*/} +#### Сброс формы редактирования {/*reset-a-detail-form*/} -This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes. +Это редактируемый список контактов. Вы можете изменить детали выбранного контакта, а затем нажать "Save" (Сохранить), чтобы обновить его, или "Reset" (Сбросить), чтобы отменить изменения. -When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes. +Когда вы выбираете другого контакта (например, Alice), состояние обновляется, но форма продолжает показывать детали предыдущего контакта. Исправьте это так, чтобы форма сбрасывалась при изменении выбранного контакта. @@ -1689,7 +1688,7 @@ button { -Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form: +Добавьте `key={selectedId}` компоненту `EditContact`. Таким образом, переключение между разными контактами будет сбрасывать форму: @@ -1842,13 +1841,13 @@ button { -#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/} +#### Очистка изображения во время его загрузки {/*clear-an-image-while-its-loading*/} -When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears. +При нажатии "Next" браузер начинает загружать следующее изображение. Однако, поскольку оно отображается в том же теге ``, по умолчанию вы по-прежнему будете видеть предыдущее изображение, пока не загрузится следующее. Это может быть нежелательно, если важно, чтобы текст всегда соответствовал изображению. Измените это так, чтобы в момент нажатия "Next" предыдущее изображение немедленно очищалось. -Is there a way to tell React to re-create the DOM instead of reusing it? +Есть ли способ указать React пересоздать DOM-элемент вместо его повторного использования? @@ -1918,7 +1917,7 @@ img { width: 150px; height: 150px; } -You can provide a `key` to the `` tag. When that `key` changes, React will re-create the `` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text. +Вы можете передать `key` тегу ``. Когда этот `key` изменится, React пересоздаст DOM-узел `` с нуля. Это вызовет кратковременную вспышку при загрузке каждого изображения, поэтому это не то, что вы захотите делать для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите гарантировать, что изображение всегда соответствует тексту. @@ -1986,11 +1985,11 @@ img { width: 150px; height: 150px; } -#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/} +#### Исправление некорректного состояния в списке {/*fix-misplaced-state-in-the-list*/} -In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed. +В этом списке каждое `Contact` имеет состояние, определяющее, была ли нажата кнопка "Показать email" для него. Нажмите "Показать email" для Алисы, а затем установите флажок "Показывать в обратном порядке". Вы заметите, что теперь развернут email Тейлора, а Алиса, переместившаяся в конец списка, отображается свернутой. -Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering. +Исправьте это так, чтобы развернутое состояние было связано с каждым контактом, независимо от выбранного порядка. @@ -2016,7 +2015,7 @@ export default function ContactList() { setReverse(e.target.checked) }} />{' '} - Show in reverse order + Показывать в обратном порядке
    {displayedContacts.map((contact, i) => @@ -2050,7 +2049,7 @@ export default function Contact({ contact }) { ); @@ -2080,16 +2079,16 @@ button { -The problem is that this example was using index as a `key`: +Проблема в том, что в этом примере в качестве `key` использовался индекс: ```js {displayedContacts.map((contact, i) =>
  • ``` -However, you want the state to be associated with _each particular contact_. +Однако вы хотите, чтобы состояние было связано с _каждым конкретным контактом_. -Using the contact ID as a `key` instead fixes the issue: +Использование ID контакта в качестве `key` вместо индекса решает проблему: @@ -2115,7 +2114,7 @@ export default function ContactList() { setReverse(e.target.checked) }} />{' '} - Show in reverse order + Показывать в обратном порядке
      {displayedContacts.map(contact => @@ -2149,7 +2148,7 @@ export default function Contact({ contact }) { ); @@ -2177,8 +2176,8 @@ button { -State is associated with the tree position. A `key` lets you specify a named position instead of relying on order. +Состояние связано с позицией в дереве. `key` позволяет указать именованную позицию вместо того, чтобы полагаться на порядок. - + \ No newline at end of file From 66a82540eef1d53543a93d36fd6d8367c2548088 Mon Sep 17 00:00:00 2001 From: "translate-react-bot[bot]" <251169733+translate-react-bot[bot]@users.noreply.github.com> Date: Mon, 18 May 2026 16:15:29 +0000 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20translate=20`preserving-and-resetti?= =?UTF-8?q?ng-state.md`=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/preserving-and-resetting-state.md | 142 +++++++++--------- 1 file changed, 71 insertions(+), 71 deletions(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index e6fc967b8b..12bd741684 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1,16 +1,15 @@ --- title: Сохранение и сброс состояния --- - -Состояние изолировано между компонентами. React отслеживает, какому компоненту принадлежит состояние, на основе его положения в дереве рендеринга. Вы можете контролировать, когда сохранять состояние, а когда сбросить его между повторными рендерами. +Состояние изолировано между компонентами. React отслеживает, какому компоненту принадлежит состояние, на основе его положения в дереве рендеринга. Вы можете контролировать, когда сохранять состояние, а когда сбрасывать его между повторными рендерами. -* Когда React выбирает сохранение или сброс состояния +* Когда React сохраняет или сбрасывает состояние * Как заставить React сбросить состояние компонента * Как ключи и типы влияют на сохранение состояния @@ -20,7 +19,7 @@ title: Сохранение и сброс состояния React строит [деревья рендеринга](learn/understanding-your-ui-as-a-tree#the-render-tree) для структуры компонентов в вашем пользовательском интерфейсе. -Когда вы даете компоненту состояние, вы можете подумать, что состояние "живет" внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которую он хранит, с правильным компонентом по его месту в дереве рендеринга. +Когда вы даете компоненту состояние, вы можете подумать, что состояние «живет» внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которое он хранит, с правильным компонентом по его положению в дереве рендеринга. Здесь есть только один JSX-тег ``, но он рендерится в двух разных позициях: @@ -90,7 +89,7 @@ label { - + Дерево React @@ -98,9 +97,9 @@ label { -**Это два отдельных счетчика, потому что каждый рендерится в своей собственной позиции в дереве.** Обычно вам не нужно думать об этих позициях, чтобы использовать React, но это может быть полезно для понимания того, как он работает. +**Это два отдельных счетчика, потому что каждый рендерится в своей собственной позиции в дереве.** Обычно вам не нужно думать об этих позициях, чтобы использовать React, но это может быть полезно для понимания того, как это работает. -В React каждый компонент на экране имеет полностью изолированное состояние. Например, если вы рендерите два компонента `Counter` бок о бок, каждый из них получит свое собственное, независимое состояние `score` и `hover`. +В React каждый компонент на экране имеет полностью изолированное состояние. Например, если вы рендерите два компонента `Counter` рядом, каждый из них получит свое собственное, независимое состояние `score` и `hover`. Попробуйте нажать на оба счетчика и заметьте, что они не влияют друг на друга: @@ -160,12 +159,12 @@ function Counter() { -Как вы видите, когда обновляется один счетчик, обновляется только состояние этого компонента: +Как видите, когда обновляется один счетчик, обновляется только состояние этого компонента: - + Обновление состояния @@ -248,11 +247,11 @@ label { -Заметьте, что как только вы перестаете рендерить второй счетчик, его состояние полностью исчезает. Это потому, что когда React удаляет компонент, он уничтожает его состояние. +Обратите внимание, что в тот момент, когда вы перестаете рендерить второй счетчик, его состояние полностью исчезает. Это потому, что когда React удаляет компонент, он уничтожает его состояние. - + Удаление компонента @@ -260,11 +259,11 @@ label { -Когда вы ставите галочку "Render the second counter", второй `Counter` и его состояние инициализируются с нуля (`score = 0`) и добавляются в DOM. +Когда вы устанавливаете флажок "Render the second counter", второй `Counter` и его состояние инициализируются с нуля (`score = 0`) и добавляются в DOM. - + Добавление компонента @@ -272,9 +271,9 @@ label { -**React сохраняет состояние компонента до тех пор, пока он рендерится на своей позиции в дереве UI.** Если он удаляется, или другой компонент рендерится на той же позиции, React отбрасывает его состояние. +**React сохраняет состояние компонента до тех пор, пока он рендерится в своей позиции в дереве пользовательского интерфейса.** Если он удаляется или другой компонент рендерится в той же позиции, React уничтожает его состояние. -## Тот же компонент на той же позиции сохраняет состояние {/*same-component-at-the-same-position-preserves-state*/} +## Один и тот же компонент в одной и той же позиции сохраняет состояние {/*same-component-at-the-same-position-preserves-state*/} В этом примере есть два разных тега ``: @@ -361,11 +360,11 @@ label { -Когда вы ставите или снимаете галочку с чекбокса, состояние счетчика не сбрасывается. Независимо от того, является ли `isFancy` `true` или `false`, у вас всегда есть `` как первый дочерний элемент `div`, возвращаемый корневым компонентом `App`: +Когда вы устанавливаете или снимаете флажок, состояние счетчика не сбрасывается. Независимо от того, `true` или `false` значение `isFancy`, у вас всегда есть `` как первый дочерний элемент `div`, возвращаемый корневым компонентом `App`: - + Обновление состояния `App` не сбрасывает `Counter`, потому что `Counter` остается на той же позиции @@ -374,11 +373,11 @@ label { -Это тот же компонент на той же позиции, поэтому с точки зрения React это тот же счетчик. +Это тот же компонент в той же позиции, поэтому с точки зрения React это тот же счетчик. -Помните, что **именно позиция в дереве UI — а не в разметке JSX — имеет значение для React!** Этот компонент имеет два `return` с разными JSX-тегами `` внутри и вне `if`: +Помните, что **именно позиция в дереве пользовательского интерфейса, а не в JSX-разметке, имеет значение для React!** Этот компонент имеет два `return` с разными JSX-тегами `` внутри и вне `if`: @@ -476,13 +475,13 @@ label { -Вы можете ожидать, что состояние сбросится при установке флажка, но это не так! Это потому, что **оба этих тега `` рендерятся в одной и той же позиции.** React не знает, где вы размещаете условия в своей функции. Все, что он "видит", — это дерево, которое вы возвращаете. +Вы можете ожидать, что состояние сбросится при установке флажка, но это не так! Это потому, что **оба этих тега `` рендерятся в одной и той же позиции.** React не знает, где вы размещаете условия в своей функции. Все, что он «видит», — это дерево, которое вы возвращаете. -В обоих случаях компонент `App` возвращает `
      ` с `` в качестве первого дочернего элемента. Для React эти два счетчика имеют один и тот же "адрес": первый дочерний элемент первого дочернего элемента корня. Именно так React сопоставляет их между предыдущим и следующим рендером, независимо от того, как вы структурируете свою логику. +В обоих случаях компонент `App` возвращает `
      ` с `` в качестве первого дочернего элемента. Для React эти два счетчика имеют один и тот же «адрес»: первый дочерний элемент первого дочернего элемента корня. Вот как React сопоставляет их между предыдущим и следующим рендером, независимо от того, как вы структурируете свою логику. -## Разные компоненты на одной позиции сбрасывают состояние {/*different-components-at-the-same-position-reset-state*/} +## Разные компоненты в одной и той же позиции сбрасывают состояние {/*different-components-at-the-same-position-reset-state*/} В этом примере установка флажка заменит `` на `

      `: @@ -561,13 +560,13 @@ label { -Здесь вы переключаетесь между _разными_ типами компонентов на одной и той же позиции. Изначально первый дочерний элемент `

      ` содержал `Counter`. Но когда вы заменили его на `p`, React удалил `Counter` из дерева UI и уничтожил его состояние. +Здесь вы переключаетесь между _разными_ типами компонентов в одной и той же позиции. Изначально первый дочерний элемент `
      ` содержал `Counter`. Но когда вы заменили его на `p`, React удалил `Counter` из дерева рендеринга и уничтожил его состояние. - + -Когда `Counter` меняется на `p`, `Counter` удаляется, а `p` добавляется. +Когда `Counter` меняется на `p`, `Counter` удаляется, а `p` добавляется @@ -575,15 +574,15 @@ label { - + -При переключении обратно `p` удаляется, а `Counter` добавляется. +При возврате `p` удаляется, а `Counter` добавляется -Кроме того, **когда вы рендерите другой компонент на той же позиции, это сбрасывает состояние всего поддерева.** Чтобы увидеть, как это работает, увеличьте счетчик, а затем установите флажок: +Кроме того, **когда вы рендерите другой компонент в той же позиции, это сбрасывает состояние всего его поддерева.** Чтобы увидеть, как это работает, увеличьте счетчик, а затем установите флажок: @@ -676,9 +675,9 @@ label { - + -Когда `section` меняется на `div`, `section` удаляется, а новый `div` добавляется. +Когда `section` меняется на `div`, `section` удаляется, а новый `div` добавляется @@ -686,9 +685,9 @@ label { - + -При переключении обратно `div` удаляется, а новый `section` добавляется. +При переключении обратно `div` удаляется, а новый `section` добавляется @@ -700,7 +699,7 @@ label { Вот почему вы не должны вкладывать определения функций компонентов. -Здесь функция компонента `MyTextField` определена *внутри* `MyComponent`: +Здесь функция компонента `MyTextField` определяется *внутри* `MyComponent`: @@ -734,13 +733,14 @@ export default function MyComponent() { -Каждый раз, когда вы нажимаете кнопку, состояние ввода исчезает! Это происходит потому, что для каждого рендера `MyComponent` создается *разная* функция `MyTextField`. Вы рендерите *разный* компонент на той же позиции, поэтому React сбрасывает все состояние ниже. Это приводит к ошибкам и проблемам с производительностью. Чтобы избежать этой проблемы, **всегда объявляйте функции компонентов на верхнем уровне и не вкладывайте их определения.** + +Каждый раз, когда вы нажимаете кнопку, состояние ввода исчезает! Это потому, что для каждого рендера `MyComponent` создается *разная* функция `MyTextField`. Вы рендерите *разный* компонент в той же позиции, поэтому React сбрасывает все состояние ниже. Это приводит к ошибкам и проблемам с производительностью. Чтобы избежать этой проблемы, **всегда объявляйте функции компонентов на верхнем уровне и не вкладывайте их определения.** -## Сброс состояния на той же позиции {/*resetting-state-at-the-same-position*/} +## Сброс состояния в той же позиции {/*resetting-state-at-the-same-position*/} -По умолчанию React сохраняет состояние компонента, пока он находится на той же позиции. Обычно это именно то, чего вы хотите, поэтому это разумное поведение по умолчанию. Но иногда вам может понадобиться сбросить состояние компонента. Рассмотрим приложение, которое позволяет двум игрокам отслеживать свои очки в каждом раунде: +По умолчанию React сохраняет состояние компонента, пока он находится в той же позиции. Обычно это именно то, чего вы хотите, поэтому такое поведение является стандартным. Но иногда вам может понадобиться сбросить состояние компонента. Рассмотрим приложение, которое позволяет двум игрокам отслеживать свои очки в каждом раунде: @@ -810,9 +810,9 @@ h1 { -В настоящее время при смене игрока очки сохраняются. Два `Counter` появляются на одной и той же позиции, поэтому React считает их *одним и тем же* `Counter`, у которого изменился проп `person`. +В настоящее время, когда вы меняете игрока, счет сохраняется. Два `Counter` отображаются в одной и той же позиции, поэтому React считает их *одним и тем же* `Counter`, у которого изменился проп `person`. -Но концептуально в этом приложении это должны быть два отдельных счетчика. Они могут появляться в одном и том же месте в пользовательском интерфейсе, но один — это счетчик для Тейлор, а другой — для Сары. +Но концептуально, в этом приложении они должны быть двумя отдельными счетчиками. Они могут отображаться в одном и том же месте в пользовательском интерфейсе, но один — это счетчик для Тейлор, а другой — для Сары. Есть два способа сбросить состояние при переключении между ними: @@ -898,19 +898,19 @@ h1 { - + Начальное состояние - + Нажатие "next" - + Повторное нажатие "next" @@ -918,7 +918,7 @@ h1 { -Состояние каждого `Counter` уничтожается каждый раз, когда он удаляется из DOM. Вот почему они сбрасываются каждый раз, когда вы нажимаете кнопку. +Состояние каждого `Counter` уничтожается каждый раз, когда он удаляется из DOM. Вот почему они сбрасываются каждый раз при нажатии кнопки. Это решение удобно, когда у вас есть всего несколько независимых компонентов, отображаемых в одном месте. В этом примере их всего два, поэтому нетрудно отобразить оба отдельно в JSX. @@ -926,7 +926,7 @@ h1 { Существует также другой, более универсальный способ сбросить состояние компонента. -Возможно, вы видели `key`, когда [рендерили списки.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Ключи предназначены не только для списков! Вы можете использовать ключи, чтобы заставить React различать любые компоненты. По умолчанию React использует порядок внутри родителя ("первый счетчик", "второй счетчик") для различения компонентов. Но ключи позволяют вам сообщить React, что это не просто *первый* счетчик или *второй* счетчик, а конкретный счетчик — например, счетчик *Тейлор*. Таким образом, React будет знать счетчик *Тейлор*, где бы он ни появился в дереве! +Возможно, вы видели `key`, когда [рендерили списки.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Ключи предназначены не только для списков! Вы можете использовать ключи, чтобы заставить React различать любые компоненты. По умолчанию React использует порядок внутри родительского элемента ("первый счетчик", "второй счетчик") для различения компонентов. Но ключи позволяют вам указать React, что это не просто *первый* счетчик или *второй* счетчик, а конкретный счетчик — например, счетчик *Тейлор*. Таким образом, React будет знать счетчик *Тейлор*, где бы он ни появился в дереве! В этом примере два `` не разделяют состояние, хотя они и появляются в одном и том же месте в JSX: @@ -1008,11 +1008,11 @@ h1 { )} ``` -Указание `key` говорит React использовать сам `key` как часть позиции, вместо их порядка внутри родителя. Вот почему, даже несмотря на то, что вы отображаете их в одном и том же месте в JSX, React считает их двумя разными счетчиками, и поэтому они никогда не будут разделять состояние. Каждый раз, когда счетчик появляется на экране, его состояние создается. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними снова и снова сбрасывает их состояние. +Указание `key` говорит React использовать сам `key` как часть позиции, вместо их порядка внутри родительского элемента. Вот почему, даже несмотря на то, что вы отображаете их в одном и том же месте в JSX, React считает их двумя разными счетчиками, и поэтому они никогда не будут разделять состояние. Каждый раз, когда счетчик появляется на экране, его состояние создается. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними снова и снова сбрасывает их состояние. -Помните, что ключи не являются глобально уникальными. Они только указывают позицию *внутри родителя*. +Помните, что ключи не являются глобально уникальными. Они только указывают позицию *внутри родительского элемента*. @@ -1020,7 +1020,7 @@ h1 { Сброс состояния с помощью ключа особенно полезен при работе с формами. -В этом приложении чата компонент `` содержит состояние текстового поля: +В этом приложении чата компонент `` содержит состояние текстового поля ввода: @@ -1115,15 +1115,15 @@ textarea { -Попробуйте ввести что-нибудь в поле ввода, а затем нажмите «Alice» или «Bob», чтобы выбрать другого получателя. Вы заметите, что состояние ввода сохраняется, потому что `` отображается в той же позиции в дереве. +Попробуйте ввести что-нибудь в поле ввода, а затем нажмите "Alice" или "Bob", чтобы выбрать другого получателя. Вы заметите, что состояние поля ввода сохраняется, потому что `` отображается в той же позиции в дереве. -**Во многих приложениях это может быть желаемым поведением, но не в приложении чата!** Вы не хотите отправлять сообщение, которое вы уже напечатали, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте `key`: +**Во многих приложениях это желаемое поведение, но не в приложении чата!** Вы не хотите отправлять сообщение, которое вы уже набрали, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте `key`: ```js ``` -Это гарантирует, что при выборе другого получателя компонент `Chat` будет воссоздан с нуля, включая любое состояние в дереве под ним. React также пересоздаст DOM-элементы вместо их повторного использования. +Это гарантирует, что при выборе другого получателя компонент `Chat` будет воссоздан с нуля, включая любое состояние в дереве ниже него. React также пересоздаст DOM-элементы вместо их повторного использования. Теперь при смене получателя поле ввода всегда очищается: @@ -1224,19 +1224,19 @@ textarea { #### Сохранение состояния для удаленных компонентов {/*preserving-state-for-removed-components*/} -В реальном приложении чата вы, вероятно, захотите восстановить состояние ввода, когда пользователь снова выберет предыдущего получателя. Есть несколько способов сохранить состояние "живым" для компонента, который больше не виден: +В реальном приложении чата вы, вероятно, захотите восстановить состояние ввода, когда пользователь снова выберет предыдущего получателя. Есть несколько способов сохранить состояние "активным" для компонента, который больше не виден: -- Вы можете отобразить _все_ чаты вместо одного текущего, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние будет сохранено. Это решение отлично подходит для простых пользовательских интерфейсов. Но оно может стать очень медленным, если скрытые деревья большие и содержат много DOM-узлов. +- Вы можете отобразить _все_ чаты вместо одного текущего, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние сохранится. Это решение отлично подходит для простых интерфейсов. Но оно может стать очень медленным, если скрытые деревья большие и содержат много DOM-узлов. - Вы можете [поднять состояние вверх](/learn/sharing-state-between-components) и хранить ожидающее сообщение для каждого получателя в родительском компоненте. Таким образом, когда дочерние компоненты удаляются, это не имеет значения, потому что именно родитель сохраняет важную информацию. Это самое распространенное решение. -- Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, захотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы компонент `Chat` инициализировал свое состояние, читая из [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), и сохранял черновики туда же. +- Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, захотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы компонент `Chat` инициализировал свое состояние, читая из [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), и сохранял черновики там же. -Независимо от выбранной вами стратегии, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл присвоить `key` дереву ``, основанному на текущем получателе. +Независимо от выбранной стратегии, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл присвоить `key` дереву `` на основе текущего получателя. -- React сохраняет состояние до тех пор, пока тот же компонент отображается в той же позиции. +- React сохраняет состояние до тех пор, пока один и тот же компонент отображается в одной и той же позиции. - Состояние не хранится в JSX-тегах. Оно связано с позицией в дереве, куда вы поместили этот JSX. - Вы можете принудительно сбросить состояние поддерева, присвоив ему другой ключ. - Не вкладывайте определения компонентов друг в друга, иначе вы случайно сбросите состояние. @@ -1247,9 +1247,9 @@ textarea { -#### Исправление исчезающего текста ввода {/*fix-disappearing-input-text*/} +#### Исправление исчезающего текста в поле ввода {/*fix-disappearing-input-text*/} -Этот пример показывает сообщение при нажатии кнопки. Однако нажатие кнопки также случайно сбрасывает ввод. Почему это происходит? Исправьте это так, чтобы нажатие кнопки не сбрасывало текст ввода. +Этот пример показывает сообщение при нажатии кнопки. Однако нажатие кнопки также случайно сбрасывает поле ввода. Почему это происходит? Исправьте это так, чтобы нажатие кнопки не сбрасывало текст в поле ввода. @@ -1298,7 +1298,7 @@ textarea { display: block; margin: 10px 0; } -Проблема в том, что `Form` отображается в разных позициях. В ветке `if` он является вторым дочерним элементом `
      `, а в ветке `else` — первым. Поэтому тип компонента в каждой позиции меняется. Первая позиция меняется между хранением `p` и `Form`, а вторая позиция меняется между хранением `Form` и `button`. React сбрасывает состояние каждый раз, когда тип компонента изменяется. +Проблема в том, что `Form` отображается в разных позициях. В ветке `if` он является вторым дочерним элементом `
      `, а в ветке `else` — первым. Поэтому тип компонента в каждой позиции меняется. Первая позиция меняется между `p` и `Form`, а вторая — между `Form` и `button`. React сбрасывает состояние каждый раз, когда тип компонента изменяется. Самое простое решение — унифицировать ветки, чтобы `Form` всегда отображался в одной и той же позиции: @@ -1394,19 +1394,19 @@ textarea { display: block; margin: 10px 0; } -Таким образом, `Form` всегда является вторым дочерним элементом, поэтому он остается на том же месте и сохраняет свое состояние. Но этот подход гораздо менее очевиден и создает риск того, что кто-то другой удалит этот `null`. +Таким образом, `Form` всегда будет вторым дочерним элементом, поэтому он останется на той же позиции и сохранит свое состояние. Но этот подход гораздо менее очевиден и создает риск того, что кто-то другой удалит этот `null`. #### Поменять местами два поля формы {/*swap-two-form-fields*/} -Эта форма позволяет вводить имя и фамилию. Она также имеет флажок, который определяет, какое поле идет первым. При установке флажка поле "Фамилия" появится перед полем "Имя". +Эта форма позволяет вводить имя и фамилию. Она также имеет флажок, который определяет, какое поле идет первым. Когда вы ставите галочку, поле "Фамилия" появляется перед полем "Имя". -Это почти работает, но есть ошибка. Если вы заполните поле "Имя" и установите флажок, текст останется в первом поле (которое теперь "Фамилия"). Исправьте это так, чтобы текст ввода также перемещался при изменении порядка. +Это почти работает, но есть ошибка. Если вы заполните поле "Имя" и поставите галочку, текст останется в первом поле (которое теперь "Фамилия"). Исправьте это так, чтобы текст ввода также перемещался при изменении порядка. -Кажется, что для этих полей их позиция внутри родителя недостаточна. Есть ли способ сообщить React, как сопоставить состояние между рендерами? +Кажется, для этих полей их позиция внутри родителя недостаточна. Есть ли способ сообщить React, как сопоставить состояние между рендерами? @@ -1534,9 +1534,9 @@ label { display: block; margin: 10px 0; } #### Сброс формы редактирования {/*reset-a-detail-form*/} -Это редактируемый список контактов. Вы можете изменить детали выбранного контакта, а затем нажать "Save" (Сохранить), чтобы обновить его, или "Reset" (Сбросить), чтобы отменить изменения. +Это редактируемый список контактов. Вы можете редактировать детали выбранного контакта, а затем нажать "Save", чтобы обновить их, или "Reset", чтобы отменить изменения. -Когда вы выбираете другого контакта (например, Alice), состояние обновляется, но форма продолжает показывать детали предыдущего контакта. Исправьте это так, чтобы форма сбрасывалась при изменении выбранного контакта. +Когда вы выбираете другого контакта (например, Алису), состояние обновляется, но форма продолжает показывать детали предыдущего контакта. Исправьте это так, чтобы форма сбрасывалась при изменении выбранного контакта. @@ -1688,7 +1688,7 @@ button { -Добавьте `key={selectedId}` компоненту `EditContact`. Таким образом, переключение между разными контактами будет сбрасывать форму: +Присвойте `key={selectedId}` компоненту `EditContact`. Таким образом, переключение между разными контактами сбросит форму: @@ -1843,11 +1843,11 @@ button { #### Очистка изображения во время его загрузки {/*clear-an-image-while-its-loading*/} -При нажатии "Next" браузер начинает загружать следующее изображение. Однако, поскольку оно отображается в том же теге ``, по умолчанию вы по-прежнему будете видеть предыдущее изображение, пока не загрузится следующее. Это может быть нежелательно, если важно, чтобы текст всегда соответствовал изображению. Измените это так, чтобы в момент нажатия "Next" предыдущее изображение немедленно очищалось. +При нажатии "Next" браузер начинает загружать следующее изображение. Однако, поскольку оно отображается в том же теге ``, по умолчанию вы по-прежнему будете видеть предыдущее изображение до тех пор, пока не загрузится следующее. Это может быть нежелательно, если важно, чтобы текст всегда соответствовал изображению. Измените это так, чтобы в момент нажатия "Next" предыдущее изображение немедленно очищалось. -Есть ли способ указать React пересоздать DOM-элемент вместо его повторного использования? +Есть ли способ сообщить React, чтобы он пересоздавал DOM вместо его повторного использования? @@ -1917,7 +1917,7 @@ img { width: 150px; height: 150px; } -Вы можете передать `key` тегу ``. Когда этот `key` изменится, React пересоздаст DOM-узел `` с нуля. Это вызовет кратковременную вспышку при загрузке каждого изображения, поэтому это не то, что вы захотите делать для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите гарантировать, что изображение всегда соответствует тексту. +Вы можете предоставить `key` тегу ``. Когда этот `key` изменится, React пересоздаст DOM-узел `` с нуля. Это вызывает кратковременную вспышку при загрузке каждого изображения, поэтому вы не захотите делать это для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите, чтобы изображение всегда соответствовало тексту. @@ -1985,9 +1985,9 @@ img { width: 150px; height: 150px; } -#### Исправление некорректного состояния в списке {/*fix-misplaced-state-in-the-list*/} +#### Исправьте неправильное состояние в списке {/*fix-misplaced-state-in-the-list*/} -В этом списке каждое `Contact` имеет состояние, определяющее, была ли нажата кнопка "Показать email" для него. Нажмите "Показать email" для Алисы, а затем установите флажок "Показывать в обратном порядке". Вы заметите, что теперь развернут email Тейлора, а Алиса, переместившаяся в конец списка, отображается свернутой. +В этом списке каждое `Contact` имеет состояние, определяющее, была ли нажата кнопка "Показать email" для него. Нажмите "Показать email" для Алисы, а затем установите флажок "Показывать в обратном порядке". Вы заметите, что теперь развернут email Тейлора, а Алисы, которая переместилась вниз, отображается свернутой. Исправьте это так, чтобы развернутое состояние было связано с каждым контактом, независимо от выбранного порядка. @@ -2086,9 +2086,9 @@ button {
    • ``` -Однако вы хотите, чтобы состояние было связано с _каждым конкретным контактом_. +Однако, вы хотите, чтобы состояние было связано с _каждым конкретным контактом_. -Использование ID контакта в качестве `key` вместо индекса решает проблему: +Использование ID контакта в качестве `key` вместо этого решает проблему: