контроллируемый -> управляемый

Author: another-guy

TRANSLATION.md

@@ -186,7 +186,7 @@ React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object).
 | codemod | codemod-скрипт |
 | commit | фиксация |
 | context | контекст |
-| (un)controlled component | (не)контролируемый компонент |
+| (un)controlled component | (не)управляемый компонент |
 | cross-cutting concerns | cквозная функциональность |
 | custom | пользовательский (*напр., пользовательские хуки*) |
 | debugging | отладка |

content/docs/forms.md

@@ -21,15 +21,15 @@ redirect_from:
 </form>
 ```
 
-По умолчанию браузер переходит на другую страницу при отправке HTML-форм, в том числе и этой. Если вас это устраивает, то не надо ничего менять, в React формы работают как обычно. Однако, чаще всего форму удобнее обрабатывать с помощью JavaScript функции, у которой есть доступ к введённым данным. Стандартный способ реализации такого поведения называется «контролируемые компоненты».
+По умолчанию браузер переходит на другую страницу при отправке HTML-форм, в том числе и этой. Если вас это устраивает, то не надо ничего менять, в React формы работают как обычно. Однако, чаще всего форму удобнее обрабатывать с помощью JavaScript функции, у которой есть доступ к введённым данным. Стандартный способ реализации такого поведения называется «управляемые компоненты».
 
-## Контролируемые компоненты {#controlled-components}
+## Управляемые компоненты {#controlled-components}
 
 В HTML элементы формы, такие как `<input>`, `<textarea>` и `<select>`, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов `state` и обновляется только через вызов[`setState()`](/docs/react-component.html#setstate)
 
-Мы можем скомбинировать оба подхода и сделать состояние React-компонента "единственным источником правды". Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться «контролируемый компонент».
+Мы можем скомбинировать оба подхода и сделать состояние React-компонента "единственным источником правды". Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться управляемый компонент».
 
-Допустим, мы хотим, чтобы предыдущий пример выводил в консоль имя, когда мы отправляем форму. Тогда можно написать форму в виде контролируемого компонента:
+Допустим, мы хотим, чтобы предыдущий пример выводил в консоль имя, когда мы отправляем форму. Тогда можно написать форму в виде управляемого компонента:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -68,7 +68,7 @@ class NameForm extends React.Component {
 
 Мы установили атрибут `value` для поля ввода, и теперь в нём всегда будет отображаться значение `this.state.value`. Состояние React-компонента стало «источником истины». А так как каждое нажатие клавиши вызывает `handleChange`, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того, как пользователь печатает.
 
-В контролируемом компоненте с каждой мутацией состояния связана функция-обработчик. Благодаря этому валидация или изменение введённого значения становится простой задачей. Например, если мы хотим, чтобы имя обязательно было набрано заглавными буквами, можно написать такой `handleChange`:
+В управляемом компоненте с каждой мутацией состояния связана функция-обработчик. Благодаря этому валидация или изменение введённого значения становится простой задачей. Например, если мы хотим, чтобы имя обязательно было набрано заглавными буквами, можно написать такой `handleChange`:
 
 ```javascript{2}
 handleChange(event) {
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-Пункт списка «Кокос» выбран по умолчанию из-за установленного атрибута `selected`. React вместо этого атрибута использует `value` в корневом теге `select`. В контролируемом компоненте так удобнее, потому что обновлять значение нужно только в одном месте (`state`). Пример:
+Пункт списка «Кокос» выбран по умолчанию из-за установленного атрибута `selected`. React вместо этого атрибута использует `value` в корневом теге `select`. В управляемом компоненте так удобнее, потому что обновлять значение нужно только в одном месте (`state`). Пример:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -180,7 +180,7 @@ class FlavorForm extends React.Component {
 
 [**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-Подводя итог, `<input type="text">`, `<textarea>`, и `<select>` работают очень похоже. Все они принимают атрибут `value`, который можно использовать, чтобы реализовать контролируемый компонент.
+Подводя итог, `<input type="text">`, `<textarea>`, и `<select>` работают очень похоже. Все они принимают атрибут `value`, который можно использовать, чтобы реализовать управляемый компонент.
 
 > Примечание
 >
@@ -198,11 +198,11 @@ class FlavorForm extends React.Component {
 <input type="file" />
 ```
 
-Так как значение такого элемента доступно только для чтения, это **неконтролируемый** React-компонент. Мы расскажем про этот и другие неконтролируемые компоненты [далее в документации](/docs/uncontrolled-components.html#the-file-input-tag).
+Так как значение такого элемента доступно только для чтения, это **неуправляемый** React-компонент. Мы расскажем про этот и другие неуправляемые компоненты [далее в документации](/docs/uncontrolled-components.html#the-file-input-tag).
 
 ## Обработка нескольких input {#handling-multiple-inputs}
 
-Если вам нужны несколько контролируемых элементов `input`, вы можете назначить каждому из них атрибут `name`, что позволит функции-обработчику решать, что делать, основываясь на значении `event.target.name`.
+Если вам нужны несколько управляемых элементов `input`, вы можете назначить каждому из них атрибут `name`, что позволит функции-обработчику решать, что делать, основываясь на значении `event.target.name`.
 
 Пример:
 
@@ -274,9 +274,9 @@ this.setState(partialState);
 
 Кроме того, `setState()` автоматически производит [слияние части состояния с текущим состоянием](/docs/state-and-lifecycle.html#state-updates-are-merged), то есть нам нужно передать в него только ту часть `state`, которую хотим изменить.
 
-## Значение null контролируемого компонента {#controlled-input-null-value}
+## Значение null управляемого компонента {#controlled-input-null-value}
 
-Если установить [контролируемому компоненту](/docs/forms.html#controlled-components) проп `value`, то пользователь не сможет изменить его значение без вашего желания. Если вы установили `value`, а поле ввода по-прежнему можно редактировать, то, возможно, вы случайно задали `value`, равный `undefined` или `null`.
+Если установить [управляемому компоненту](/docs/forms.html#controlled-components) проп `value`, то пользователь не сможет изменить его значение без вашего желания. Если вы установили `value`, а поле ввода по-прежнему можно редактировать, то, возможно, вы случайно задали `value`, равный `undefined` или `null`.
 
 Код ниже это демонстрирует. (Изначально заблокированный `input` становится редактируемым после небольшой задержки.)
 
@@ -289,10 +289,10 @@ setTimeout(function() {
 
 ```
 
-## Альтернативы контролируемым компонентам {#alternatives-to-controlled-components}
+## Альтернативы управляемым компонентам {#alternatives-to-controlled-components}
 
-Использование контролируемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться [неконтролируемые компоненты](/docs/uncontrolled-components.html) — альтернативная техника реализации ввода данных в форму.
+Использование управляемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться [неуправляемые компоненты](/docs/uncontrolled-components.html) — альтернативная техника реализации ввода данных в форму.
 
 ## Полноценные решения {#fully-fledged-solutions}
 
-Если вы ищите полноценное решение, которое может валидировать ввод, запомнить посещённые поля формы и обработать её отправку, присмотритесь к [Formik](https://jaredpalmer.com/formik). Эта библиотека построена на принципах контролируемых компонентов и управления состоянием, так что не пренебрегайте их изучением.
+Если вы ищите полноценное решение, которое может валидировать ввод, запомнить посещённые поля формы и обработать её отправку, присмотритесь к [Formik](https://jaredpalmer.com/formik). Эта библиотека построена на принципах управляемых компонентов и управления состоянием, так что не пренебрегайте их изучением.

content/docs/integrating-with-other-libraries.md

@@ -67,7 +67,7 @@ function Example() {
 }
 ```
 
-Для простоты мы будем реализовывать [неконтролируемый компонент](/docs/uncontrolled-components.html).
+Для простоты мы будем реализовывать [неуправляемый компонент](/docs/uncontrolled-components.html).
 
 Сначала создадим пустой компонент, с методом `render()`, который возвращает `<select>`, обёрнутый в `<div>`:
 
@@ -108,7 +108,7 @@ componentWillUnmount() {
 <select className="Chosen-select" ref={el => this.el = el}>
 ```
 
-Этого достаточно, чтобы наш компонент отрендерился, но мы бы хотели получать уведомления об изменении значений. Для этого мы подпишемся на jQuery событие `change` на `<select>`, контролируемом Chosen.
+Этого достаточно, чтобы наш компонент отрендерился, но мы бы хотели получать уведомления об изменении значений. Для этого мы подпишемся на jQuery событие `change` на `<select>`, управляемом Chosen.
 
 Мы не станем передавать в Chosen `this.props.onChange` напрямую, потому что пропсы компонента могут со временем измениться (в том числе и обработчики событий). Вместо этого мы объявим метод `handleChange()`, который будет вызывать `this.props.onChange`, и подпишем его на jQuery-событие `change`:
 

content/docs/nav.yml

@@ -70,7 +70,7 @@
     - id: render-props
       title: Рендер-пропсы
     - id: static-type-checking
-      title:  Статическая типизация
+      title: Статическая типизация
     - id: strict-mode
       title: Строгий режим
     - id: typechecking-with-proptypes

content/docs/reconciliation.md

@@ -139,7 +139,7 @@ React будет мутировать каждого потомка, вмест
 
 В крайнем случае вы можете передать индекс элемента массива в качестве ключа. Это работает хорошо в случае, если элементы никогда не меняют порядок. Перестановки элементов вызывают замедление.
 
-При использовании ключей перестановки так же могут вызывать проблемы с состоянием компонента. Экземпляры компонента обновляются и переиспользуются на основе их ключей. Перемещение элемента изменяет его, если ключ является индексом. В результате состояние компонента для таких вещей, как неконтролируемые `<input>`, может смешаться и обновиться неожиданным образом.
+При использовании ключей перестановки так же могут вызывать проблемы с состоянием компонента. Экземпляры компонента обновляются и переиспользуются на основе их ключей. Перемещение элемента изменяет его, если ключ является индексом. В результате состояние компонента для таких вещей, как неуправляемые `<input>`, может смешаться и обновиться неожиданным образом.
 
 [Здесь](codepen://reconciliation/index-used-as-key) на CodePen есть примеры проблем, которые могут быть вызваны использованием индексов в качестве ключей, а [здесь](codepen://reconciliation/no-index-used-as-key) обновлённая версия того же примера, которая показывает как проблемы с перестановкой, сортировкой и вставкой элементов в начало решаются, если не использовать индексы как ключи.