From dfb01037c965b4d3ef7a9aaa26684706b5151e31 Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Tue, 12 Feb 2019 00:07:00 +0300 Subject: [PATCH 01/18] Translate React.Component --- content/docs/reference-react-component.md | 359 +++++++++--------- .../get-snapshot-before-update.js | 10 +- 2 files changed, 182 insertions(+), 187 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index ecb4d087c..1d0027de5 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -15,50 +15,50 @@ redirect_from: - "tips/use-react-with-other-libraries.html" --- -This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Components and Props](/docs/components-and-props.html), as well as [State and Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first. +Эта страница содержит подробный справочник API для определения классового компонента React. Предполагается, что вы знакомы с такими концепциями React, как [компоненты и пропсы](/docs/components-and-props.html), а также [состояние и жизненный цикл](/docs/state-and-lifecycle.html). Прочитайте про них, если вы этого не сделали. -## Overview {#overview} +## Обзор {#overview} -React lets you define components as classes or functions. Components defined as classes currently provide more features which are described in detail on this page. To define a React component class, you need to extend `React.Component`: +React позволяет определять компоненты как классы или функции. В настоящее время классовые компоненты имеют больше возможностей. Они разобраны на этой странице. Чтобы определить такой компонент, необходимо расширить `React.Component`: ```js class Welcome extends React.Component { render() { - return

Hello, {this.props.name}

; + return

Привет, {this.props.name}

; } } ``` -The only method you *must* define in a `React.Component` subclass is called [`render()`](#render). All the other methods described on this page are optional. +Единственный *обязательный* метод в подклассе `React.Component` – [`render()`](#render). Все остальные методы, описанные ниже, являются необязательными. -**We strongly recommend against creating your own base component classes.** In React components, [code reuse is primarily achieved through composition rather than inheritance](/docs/composition-vs-inheritance.html). +**Мы рекомендуем не создавать собственные классы базовых компонентов.** В компонентах React переиспользование кода обычно достигается за счет [композиции, а не наследования](/docs/composition-vs-inheritance.html). ->Note: +> Примечание: > ->React doesn't force you to use the ES6 class syntax. If you prefer to avoid it, you may use the `create-react-class` module or a similar custom abstraction instead. Take a look at [Using React without ES6](/docs/react-without-es6.html) to learn more. +>React не заставляет вас использовать синтаксис классов из ES6. Вместо этого вы можете использовать модуль `create-react-class` или его аналоги. Посмотрите раздел [Использование React без ES6](/docs/react-without-es6.html), чтобы узнать больше. -### The Component Lifecycle {#the-component-lifecycle} +### Жизненный цикл компонента {#the-component-lifecycle} -Each component has several "lifecycle methods" that you can override to run code at particular times in the process. **You can use [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.** In the list below, commonly used lifecycle methods are marked as **bold**. The rest of them exist for relatively rare use cases. +Каждый компонент имеет несколько «методов жизненного цикла». Переопределение этих методов позволяет выполнять код в конкретное время в процессе. **Вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) как шпаргалку.** Далее на странице **полужирным шрифтом** выделены самые распространённые методы жизненного цикла. -#### Mounting {#mounting} +#### Монтирование {#mounting} -These methods are called in the following order when an instance of a component is being created and inserted into the DOM: +Эти методы вызываются в следующем порядке при создании экземпляра компонента и его вставки в DOM: - [**`constructor()`**](#constructor) - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops) - [**`render()`**](#render) - [**`componentDidMount()`**](#componentdidmount) ->Note: +> Примечание: > ->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code: +> Этот метод устарел. [Не используйте его](/blog/2018/03/27/update-on-async-rendering.html) в новом коде. > >- [`UNSAFE_componentWillMount()`](#unsafe_componentwillmount) -#### Updating {#updating} +#### Обновление {#updating} -An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered: +Обновление происходит при изменении пропсов или состояния. Эти методы вызываются в следующем порядке при повторном рендере компонента: - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops) - [`shouldComponentUpdate()`](#shouldcomponentupdate) @@ -66,50 +66,50 @@ An update can be caused by changes to props or state. These methods are called i - [`getSnapshotBeforeUpdate()`](#getsnapshotbeforeupdate) - [**`componentDidUpdate()`**](#componentdidupdate) ->Note: +> Примечание: > ->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code: +> Эти методы устарели. [Не используйте их](/blog/2018/03/27/update-on-async-rendering.html) в новом коде. > >- [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate) >- [`UNSAFE_componentWillReceiveProps()`](#unsafe_componentwillreceiveprops) -#### Unmounting {#unmounting} +#### Размонтирование {#unmounting} -This method is called when a component is being removed from the DOM: +Этот метод вызывается при удалении компонента из DOM: - [**`componentWillUnmount()`**](#componentwillunmount) -#### Error Handling {#error-handling} +#### Обработка ошибок {#error-handling} -These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component. +Эти методы вызываются если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. - [`static getDerivedStateFromError()`](#static-getderivedstatefromerror) - [`componentDidCatch()`](#componentdidcatch) -### Other APIs {#other-apis} +### Другие API {#other-apis} -Each component also provides some other APIs: +В каждом компоненте доступны методы API: - [`setState()`](#setstate) - [`forceUpdate()`](#forceupdate) -### Class Properties {#class-properties} +### Свойства класса {#class-properties} - [`defaultProps`](#defaultprops) - [`displayName`](#displayname) -### Instance Properties {#instance-properties} +### Свойства экземпляра {#instance-properties} - [`props`](#props) - [`state`](#state) * * * -## Reference {#reference} +## Справочник {#reference} -### Commonly Used Lifecycle Methods {#commonly-used-lifecycle-methods} +### Распространённые методы жизненного цикла {#commonly-used-lifecycle-methods} -The methods in this section cover the vast majority of use cases you'll encounter creating React components. **For a visual reference, check out [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).** +Методы в этом разделе охватывают большинство задач, с которыми вы столкнётесь при использовании React-компонентов. **Для визуального представления вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).** ### `render()` {#render} @@ -117,23 +117,23 @@ The methods in this section cover the vast majority of use cases you'll encounte render() ``` -The `render()` method is the only required method in a class component. +`render()` – единственный обязательный метод в классовом компоненте. -When called, it should examine `this.props` and `this.state` and return one of the following types: +При вызове он проверяет `this.props` и `this.state` и возвращает один из следующих вариантов: -- **React elements.** Typically created via [JSX](/docs/introducing-jsx.html). For example, `
` and `` are React elements that instruct React to render a DOM node, or another user-defined component, respectively. -- **Arrays and fragments.** Let you return multiple elements from render. See the documentation on [fragments](/docs/fragments.html) for more details. -- **Portals**. Let you render children into a different DOM subtree. See the documentation on [portals](/docs/portals.html) for more details. -- **String and numbers.** These are rendered as text nodes in the DOM. -- **Booleans or `null`**. Render nothing. (Mostly exists to support `return test && ` pattern, where `test` is boolean.) +- **Элемент React.** Обычно создаётся с помощью [JSX](/docs/introducing-jsx.html). Указывает React, что рендерить: DOM-узел или пользовательский компонент. Например, `
` или ``. +- **Массивы и фрагменты.** Возвращает несколько элементов из `render()`. Подробнее про [фрагменты](/docs/fragments.html). +- **Порталы**. Рендерит несколько дочерних элементов в другое поддерево DOM. Подробнее про [порталы](/docs/portals.html). +- **Строки и числа.** Рендерит текстовые DOM-узлы. +- **Booleans or `null`**. Ничего не рендерит. (Обычно необходим для поддержки паттерна `return test && `, где `test` – логическое значение.) -The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser. +Функция `render()` должна быть *чистой*. Это означает, что она: не изменяет состояние компонента, всегда возвращает один и тот же результат, не взаимодействует напрямую с браузером. -If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes components easier to think about. +Взаимодействовать с браузером необходимо в `componentDidMount()` или других методах жизненного цикла. *Чистый* `render()` делает компонент понятным. -> Note +> Примечание: > -> `render()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false. +> `render()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`. * * * @@ -143,48 +143,47 @@ If you need to interact with the browser, perform your work in `componentDidMoun constructor(props) ``` -**If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.** +**Вы можете не использовать конструктор в React-компоненте, если вы не определяете состояние или не привязываете методы.** -The constructor for a React component is called before it is mounted. When implementing the constructor for a `React.Component` subclass, you should call `super(props)` before any other statement. Otherwise, `this.props` will be undefined in the constructor, which can lead to bugs. +Конструктор компонента React вызывается до того, как компонент будет примонтирован. Вначале конструктора необходимо вызывать `super(props)`. Если это не сделать, `this.props` не будет определен. Это может привести к багам. -Typically, in React constructors are only used for two purposes: +Конструкторы в React обычно используют для двух целей: -* Initializing [local state](/docs/state-and-lifecycle.html) by assigning an object to `this.state`. -* Binding [event handler](/docs/handling-events.html) methods to an instance. +* Инициализация [внутреннего состояния](/docs/state-and-lifecycle.html) через присвоение объекта `this.state`. +* Привязка [обработчиков событий](/docs/handling-events.html) к экземпляру. -You **should not call `setState()`** in the `constructor()`. Instead, if your component needs to use local state, **assign the initial state to `this.state`** directly in the constructor: +Вы **не должны вызывать `setState()`** в `constructor()`. Если вам нужно внутреннее состояние, **присвойте начальное состояние `this.state`** прямо в конструкторе. ```js constructor(props) { super(props); - // Don't call this.setState() here! + // Не вызывайте здесь this.setState()! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } ``` -Constructor is the only place where you should assign `this.state` directly. In all other methods, you need to use `this.setState()` instead. +Конструктор — единственное место, где можно напрямую изменять `this.state`. В остальных методах необходимо использовать `this.setState()`. -Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use `componentDidMount()` instead. +Не используйте побочные эффекты или подписки в конструкторе. Вместо этого используйте `componentDidMount()`. ->Note +> Примечание: > ->**Avoid copying props into state! This is a common mistake:** +>**Не копируйте пропсы в состояние! Это распространённая ошибка:** > >```js >constructor(props) { > super(props); -> // Don't do this! +> // Не делайте этого! > this.state = { color: props.color }; >} >``` > ->The problem is that it's both unnecessary (you can use `this.props.color` directly instead), and creates bugs (updates to the `color` prop won't be reflected in the state). +>Проблема в том, что это излишне и приводит к багам (обновления в пропе `color` не будут зафиксированы в состоянии). Вместо этого используйте `this.props.color`. > ->**Only use this pattern if you intentionally want to ignore prop updates.** In that case, it makes sense to rename the prop to be called `initialColor` or `defaultColor`. You can then force a component to "reset" its internal state by [changing its `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) when necessary. +> **Используйте данный подход, если вы намеренно хотите игнорировать обновления пропсов.** В таком случае лучше переименовать проп в `initialColor` или `defaultColor`. После этого вы сможете заставить компонент «сбросить» своё внутреннее состояние, [изменив свой ключ](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key), когда это будет необходимо. > ->Read our [blog post on avoiding derived state](/blog/2018/06/07/you-probably-dont-need-derived-state.html) to learn about what to do if you think you need some state to depend on the props. - +>Прочитайте нашу статью в блоге про [отсутствие необходимости в производном состоянии](/blog/2018/06/07/you-probably-dont-need-derived-state.html). Она описывает случаи, в которых вам необходимо состояние, зависящее от пропсов. * * * @@ -194,11 +193,11 @@ Avoid introducing any side-effects or subscriptions in the constructor. For thos componentDidMount() ``` -`componentDidMount()` is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. +`componentDidMount()` вызывается сразу после монтирования (компонент вставлен в DOM). В этом методе должны происходить действия, которые требуют наличия DOM-узлов. Это хорошее место для создания сетевых запросов. -This method is a good place to set up any subscriptions. If you do that, don't forget to unsubscribe in `componentWillUnmount()`. +Этот метод подходит для настройки подписок. Но не забудьте отписаться от них в `componentWillUnmount()`. -You **may call `setState()` immediately** in `componentDidMount()`. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the `render()` will be called twice in this case, the user won't see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the `constructor()` instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position. +Вы **можете сразу вызвать setState()** в `componentDidMount()`. Это вызовет дополнительный рендер перед тем как браузер обновит экран. Гарантируется, что пользователь не увидит промежуточное состояние, даже если `render()` будет вызываться дважды. Используйте этот подход с осторожностью, он может вызвать проблемы с производительностью. В большинстве случаев начальное состояние лучше объявить в `constructor()`. Однако, это может быть необходимо для случаев, когда нужно измерить размер или положение DOM-узла на основе которого происходит рендер. Например, для модальных окон или всплывающих подсказок. * * * @@ -208,26 +207,27 @@ You **may call `setState()` immediately** in `componentDidMount()`. It will trig componentDidUpdate(prevProps, prevState, snapshot) ``` -`componentDidUpdate()` is invoked immediately after updating occurs. This method is not called for the initial render. +`componentDidUpdate()` вызывается сразу после обновления. Не вызывается при первом рендере. -Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed). +Метод позволяет работать с DOM при обновлении компонента. Также он подходит для выполнения сетевых запросов, которые необходимы для сравнения текущих пропсов с предыдущими. Запрос можно не делать, если пропсы не изменились. ```js componentDidUpdate(prevProps) { - // Typical usage (don't forget to compare props): + // Популярный пример (не забудьте сравнить пропсы): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } } ``` -You **may call `setState()` immediately** in `componentDidUpdate()` but note that **it must be wrapped in a condition** like in the example above, or you'll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance. If you're trying to "mirror" some state to a prop coming from above, consider using the prop directly instead. Read more about [why copying props into state causes bugs](/blog/2018/06/07/you-probably-dont-need-derived-state.html). +Вы **можете сразу вызвать setState()** в `componentDidUpdate()`, если **оно находится в условии**, как в примере выше. Иначе может произойти бесконечный цикл. +Это повлечёт за собой дополнительный, незаметный для пользователя, рендер, который повлияет на производительность компонента. Используйте пропсы для «отражения» некоторого состояния в пропсах, приходящих сверху. Подробнее о том, [почему копирование пропсов в состояние вызывает баги](/blog/2018/06/07/you-probably-dont-need-derived-state.html). -If your component implements the `getSnapshotBeforeUpdate()` lifecycle (which is rare), the value it returns will be passed as a third "snapshot" parameter to `componentDidUpdate()`. Otherwise this parameter will be undefined. +В `componentDidUpdate()` может быть доступен третий параметр `snapshot`, только в том случае, если реализован метод жизненного цикла `getSnapshotBeforeUpdate()` (используется редко). -> Note +> Примечание: > -> `componentDidUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false. +> `componentDidUpdate()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`. * * * @@ -237,16 +237,15 @@ If your component implements the `getSnapshotBeforeUpdate()` lifecycle (which is componentWillUnmount() ``` -`componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in `componentDidMount()`. +`componentWillUnmount()` вызывается сразу перед размонтированием и удалением компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок, созданных в `componentDidMount()`. -You **should not call `setState()`** in `componentWillUnmount()` because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again. +**Не используйте setState()** в `componentWillUnmount()`, так как компонент никогда не рендерится повторно. После того, как экземпляр компонента будет размонтирован, он никогда не будет примонтирован снова. * * * -### Rarely Used Lifecycle Methods {#rarely-used-lifecycle-methods} - -The methods in this section correspond to uncommon use cases. They're handy once in a while, but most of your components probably don't need any of them. **You can see most of the methods below on [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) if you click the "Show less common lifecycles" checkbox at the top of it.** +### Редко используемые методы жизненного цикла {#rarely-used-lifecycle-methods} +Методы из этого раздела используются редко. В большинстве компонентов они не нужны, хотя иногда бывают полезны. **Вы можете увидеть большинство приведённых ниже методов на [этой диаграмме жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/), если наверху страницы нажмете на чекбокс «Show less common lifecycles».** ### `shouldComponentUpdate()` {#shouldcomponentupdate} @@ -254,17 +253,17 @@ The methods in this section correspond to uncommon use cases. They're handy once shouldComponentUpdate(nextProps, nextState) ``` -Use `shouldComponentUpdate()` to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. +Используйте `shouldComponentUpdate()`, чтобы указать необходимость следующего рендера на основе изменений состояния и пропсов. По умолчанию происходит повторный рендер при любом изменении состояния. В большинстве случаев вы должны полагаться на это поведение. -`shouldComponentUpdate()` is invoked before rendering when new props or state are being received. Defaults to `true`. This method is not called for the initial render or when `forceUpdate()` is used. +`shouldComponentUpdate()` вызывается перед рендером, когда получает новые пропсы или состояние. Значение по умолчанию равно `true`. Этот метод не вызывается при первом рендере или когда используется `forceUpdate()`. -This method only exists as a **[performance optimization](/docs/optimizing-performance.html).** Do not rely on it to "prevent" a rendering, as this can lead to bugs. **Consider using the built-in [`PureComponent`](/docs/react-api.html#reactpurecomponent)** instead of writing `shouldComponentUpdate()` by hand. `PureComponent` performs a shallow comparison of props and state, and reduces the chance that you'll skip a necessary update. +Этот метод нужен только для **[повышения производительности](/docs/optimizing-performance.html).**. Но не опирайтесь на его возможность «предотвратить» рендер, это может привести к багам. Вместо этого **используйте [`PureComponent`](/docs/react-api.html#reactpurecomponent)**, который позволяет не описывать поведение `shouldComponentUpdate()` вручную. `PureComponent` поверхностно сравнивает пропсы и состояние и позволяет не пропустить необходимое обновление. -If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped. Note that returning `false` does not prevent child components from re-rendering when *their* state changes. +Если вы уверены, что хотите написать его вручную, вы можете сравнить `this.props` с `nextProps` и `this.state` с `nextState`. Верните `false` что бы пропустить обновление React. Возвращение `false` не предотвращает повторный рендер дочерних компонентов при изменении *их* состояния. -We do not recommend doing deep equality checks or using `JSON.stringify()` in `shouldComponentUpdate()`. It is very inefficient and will harm performance. +Мы не рекомендуем делать глубокое сравнение или использовать `JSON.stringify()` в `shouldComponentUpdate()`. Это неэффективно и плохо влияет на производительность. -Currently, if `shouldComponentUpdate()` returns `false`, then [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. In the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component. +В настоящее время, если `shouldComponentUpdate()` возвращает `false`, то [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate), [`render()`](#render) и [`componentDidUpdate()`](#componentdidupdate) не будут вызваны. В будущем React может рассматривать `shouldComponentUpdate()` как подсказку, а не строгое указание. В таком случае возврат `false` сможет привести к повторному рендеру компонента. * * * @@ -274,22 +273,23 @@ Currently, if `shouldComponentUpdate()` returns `false`, then [`UNSAFE_component static getDerivedStateFromProps(props, state) ``` -`getDerivedStateFromProps` is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing. +`getDerivedStateFromProps` вызывается сразу перед вызовом метода `render`, как при начальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновления состояния или null, чтобы ничего не обновлять. + +Этот метод существует для [редких случаев](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state), когда изменения в пропсах не сразу влияют на состояние. Например, это подойдёт для реализации компонента ``, который сравнивает свои предыдущие и следующие дочерние компоненты, чтобы решить, какой из них нужно анимировать. -This method exists for [rare use cases](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) where the state depends on changes in props over time. For example, it might be handy for implementing a `` component that compares its previous and next children to decide which of them to animate in and out. +Производное состояние приводит к сложному коду и делает ваши компоненты сложными для понимания. Убедитесь, что вы знакомы с [простыми альтернативами:](/blog/2018/06/07/you-probably-dont-need-derived-state.html) -Deriving state leads to verbose code and makes your components difficult to think about. -[Make sure you're familiar with simpler alternatives:](/blog/2018/06/07/you-probably-dont-need-derived-state.html) +* Чтобы **выполнить побочный эффект при изменении пропсов** (например, сетевой запрос или анимацию) используйте [`componentDidUpdate`](#componentdidupdate). -* If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead. +* Чтобы **повторно вычислить данные при изменении пропсов**, используйте [функцию мемоизации](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization). -* If you want to **re-compute some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization). +* Чтобы **«сбросить» некоторое состояние при изменении пропсов**, используйте [контролируемые компоненты](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) или [неконтролируемые компоненты с ключом](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key). -* If you want to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead. +Этот метод не имеет доступа к экземпляру компонента. Чтобы использовать пропсы, состояние и методы класса в `getDerivedStateFromProps()`, их нужно вынести за пределы класса в виде чистых функций. -This method doesn't have access to the component instance. If you'd like, you can reuse some code between `getDerivedStateFromProps()` and the other class methods by extracting pure functions of the component props and state outside the class definition. +Если вы хотите переиспользовать код между `getDerivedStateFromProps()` и другими методами класса, извлекая чистые функции пропсов и состояния компонента вне определения класса. -Note that this method is fired on *every* render, regardless of the cause. This is in contrast to `UNSAFE_componentWillReceiveProps`, which only fires when the parent causes a re-render and not as a result of a local `setState`. +Обратите внимание, что этот метод запускается при каждом рендере, независимо от причины. Это отличается от метода `UNSAFE_componentWillReceiveProps`, который запускается только при повторном рендере родительского компонента, а не в результате вызова `setState`. * * * @@ -299,41 +299,40 @@ Note that this method is fired on *every* render, regardless of the cause. This getSnapshotBeforeUpdate(prevProps, prevState) ``` -`getSnapshotBeforeUpdate()` is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to `componentDidUpdate()`. +`getSnapshotBeforeUpdate()` вызывается прямо перед этапом «фиксирования» (например, перед добавлением в DOM). Он позволяет вашему компоненту брать некоторую информацию из DOM (например, положение прокрутки) перед её возможным изменением. Любое значение, возвращаемое этим методом жизненного цикла, будет передано как параметр `componentDidUpdate()`. -This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way. +Это применяется редно, но может быть полезно в таких интерфейсах, как цепочка сообщений в чатах, в которых позиция прокрутки обрабатывается особым образом. -A snapshot value (or `null`) should be returned. +Значение снимка (или `null`) должно быть возвращено. -For example: +Например: `embed:react-component-reference/get-snapshot-before-update.js` -In the above examples, it is important to read the `scrollHeight` property in `getSnapshotBeforeUpdate` because there may be delays between "render" phase lifecycles (like `render`) and "commit" phase lifecycles (like `getSnapshotBeforeUpdate` and `componentDidUpdate`). +В примерах выше важно получить значение свойства `scrollHeight` в `getSnapshotBeforeUpdate` из-за того, что могут возникать задержки между этапами жизненного цикла «рендер» (например, `render`) и «фиксирование» (например, `getSnapshotBeforeUpdate` и `componentDidUpdate`). * * * -### Error boundaries {#error-boundaries} +### Предохранители {#error-boundaries} -[Error boundaries](/docs/error-boundaries.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. +[Предохранители](/docs/error-boundaries.html) – это React-компоненты, которые перехватывают JavaScript-ошибки в любом месте их дочернего дерева компонентов. Затем логируют эти ошибки и отображают запасной интерфейс вместо разрушенного дерева компонентов. Предохранители отлавливают ошибки при рендере, в методах жизненного цикла и в конструкторах всего дерева под ними. -A class component becomes an error boundary if it defines either (or both) of the lifecycle methods `static getDerivedStateFromError()` or `componentDidCatch()`. Updating state from these lifecycles lets you capture an unhandled JavaScript error in the below tree and display a fallback UI. +Классовый компонент становится предохранителем, если в нём используются методы жизненного цикла `static getDerivedStateFromError()` и (или) `componentDidCatch()`. Обновление состояния в этом методе жизненного цикла позволяет перехватить необработанную JavaScript-ошибку в дереве ниже и отобразить запасной интерфейс. -Only use error boundaries for recovering from unexpected exceptions; **don't try to use them for control flow.** +Используйте предохранители только для обработки неожиданных исключений, **не используйте их для управления потоком.** -For more details, see [*Error Handling in React 16*](/blog/2017/07/26/error-handling-in-react-16.html). +Подробнее в разделе [*Предохранители в React 16*](/blog/2017/07/26/error-handling-in-react-16.html). -> Note -> -> Error boundaries only catch errors in the components **below** them in the tree. An error boundary can’t catch an error within itself. +> Примечание: +> +> Предохранители перехватывают ошибки в компонентах **ниже** по дереву. Предохранители не могут поймать ошибку внутри себя. ### `static getDerivedStateFromError()` {#static-getderivedstatefromerror} ```javascript static getDerivedStateFromError(error) ``` -This lifecycle is invoked after an error has been thrown by a descendant component. -It receives the error that was thrown as a parameter and should return a value to update state. +Этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка. Он получает ошибку в качестве параметра и возвращает значение для обновления состояния. ```js{7-10,13-16} class ErrorBoundary extends React.Component { @@ -343,25 +342,24 @@ class ErrorBoundary extends React.Component { } static getDerivedStateFromError(error) { - // Update state so the next render will show the fallback UI. + // Обновите состояние так, чтобы следующий рендер показал запасной интерфейс. return { hasError: true }; } render() { if (this.state.hasError) { - // You can render any custom fallback UI + // Здесь можно рендерить запасной интерфейс return

Something went wrong.

; } - return this.props.children; + return this.props.children; } } ``` -> Note +> Примечание: > -> `getDerivedStateFromError()` is called during the "render" phase, so side-effects are not permitted. -For those use cases, use `componentDidCatch()` instead. +> `getDerivedStateFromError()` вызывается во время этапа "рендера". Поэтому здесь запрещены любые побочные эффекты, но их можно использовать в `componentDidCatch()`. * * * @@ -371,15 +369,12 @@ For those use cases, use `componentDidCatch()` instead. componentDidCatch(error, info) ``` -This lifecycle is invoked after an error has been thrown by a descendant component. -It receives two parameters: - -1. `error` - The error that was thrown. -2. `info` - An object with a `componentStack` key containing [information about which component threw the error](/docs/error-boundaries.html#component-stack-traces). +Этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка. Он получает два параметра: +1. `error` - перехваченная ошибка +2. `info` - объект с ключом `componentStack`, содержащий [информацию о компоненте, в котором произошла ошибка](/docs/error-boundaries.html#component-stack-traces). -`componentDidCatch()` is called during the "commit" phase, so side-effects are permitted. -It should be used for things like logging errors: +`componentDidCatch()` вызывается во время этапа "фиксации", поэтому здесь можно использовать побочные эффекты. Метод можно использовать для логирования ошибок. ```js{12-19} class ErrorBoundary extends React.Component { @@ -389,12 +384,12 @@ class ErrorBoundary extends React.Component { } static getDerivedStateFromError(error) { - // Update state so the next render will show the fallback UI. + // Обновите состояние так, чтобы следующий рендер показал запасной интерфейс. return { hasError: true }; } componentDidCatch(error, info) { - // Example "componentStack": + // Пример "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) @@ -404,25 +399,25 @@ class ErrorBoundary extends React.Component { render() { if (this.state.hasError) { - // You can render any custom fallback UI + // Здесь можно рендерить запасной интерфейс return

Something went wrong.

; } - return this.props.children; + return this.props.children; } } ``` -> Note -> -> In the event of an error, you can render a fallback UI with `componentDidCatch()` by calling `setState`, but this will be deprecated in a future release. -> Use `static getDerivedStateFromError()` to handle fallback rendering instead. +> Примечание: +> +>В случае ошибки вы можете рендерить запасной интерфейс с помощью `componentDidCatch()`, вызвав `setState`. Однако, этот способ скоро будет считаться устаревшим. +> Используйте `static getDerivedStateFromError()` для рендера резервного интерфейса. * * * -### Legacy Lifecycle Methods {#legacy-lifecycle-methods} +### Устаревшие методы жизненного цикла {#legacy-lifecycle-methods} -The lifecycle methods below are marked as "legacy". They still work, but we don't recommend using them in the new code. You can learn more about migrating away from legacy lifecycle methods in [this blog post](/blog/2018/03/27/update-on-async-rendering.html). +Приведённые ниже методы жизненного цикла устарели. Их не рекомендуется использовать в новом коде, хотя они продолжают работать. Вы можете узнать больше о переходе с устаревших методов жизненного цикла в [блоге](/blog/2018/03/27/update-on-async-rendering.html). ### `UNSAFE_componentWillMount()` {#unsafe_componentwillmount} @@ -430,15 +425,15 @@ The lifecycle methods below are marked as "legacy". They still work, but we don' UNSAFE_componentWillMount() ``` -> Note +> Примечание: > -> This lifecycle was previously named `componentWillMount`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components. +> Этот метод жизненного цикла раньше назывался `componentWillMount`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles). -`UNSAFE_componentWillMount()` is invoked just before mounting occurs. It is called before `render()`, therefore calling `setState()` synchronously in this method will not trigger an extra rendering. Generally, we recommend using the `constructor()` instead for initializing state. +`UNSAFE_componentWillMount()` вызывается сразу перед монтированием. Он вызывается перед `render()`, поэтому синхронный вызов `setState()` в этом методе не вызовет дополнительный рендер. Для инициализации состояния мы рекомендуем использовать `constructor()`. -Avoid introducing any side-effects or subscriptions in this method. For those use cases, use `componentDidMount()` instead. +Избегайте добавления каких-либо побочных эффектов или подписок в этом методе. Вместо этого используйте `componentDidMount()`. -This is the only lifecycle method called on server rendering. +Это единственный метод жизненного цикла, вызываемый при серверном рендеринге. * * * @@ -448,25 +443,25 @@ This is the only lifecycle method called on server rendering. UNSAFE_componentWillReceiveProps(nextProps) ``` -> Note +> Примечание: > -> This lifecycle was previously named `componentWillReceiveProps`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components. +> Этот метод жизненного цикла раньше назывался `componentWillReceiveProps`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles). -> Note: +> Примечание: > -> Using this lifecycle method often leads to bugs and inconsistencies +> Частое использование этого метода жизненного цикла приводило к багам > -> * If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead. -> * If you used `componentWillReceiveProps` for **re-computing some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization). -> * If you used `componentWillReceiveProps` to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead. +> * Чтобы **выполнить побочный эффект при изменении пропсов** (например, сетевой запрос или анимацию) используйте [`componentDidUpdate`](#componentdidupdate). +> * Чтобы **повторно вычислить данные при изменении пропсов** вместо `componentWillReceiveProps` используйте [функцию мемоизации](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization). +> * Чтобы **«сбросить» некоторое состояние при изменении пропсов** вместо `componentWillReceiveProps` используйте [контролируемые компоненты](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) или [неконтролируемые компоненты с ключом](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key). > -> For other use cases, [follow the recommendations in this blog post about derived state](/blog/2018/06/07/you-probably-dont-need-derived-state.html). +> Другие рекомендации можно посмотреть [в статье про производное состояние](/blog/2018/06/07/you-probably-dont-need-derived-state.html). -`UNSAFE_componentWillReceiveProps()` is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare `this.props` and `nextProps` and perform state transitions using `this.setState()` in this method. +`UNSAFE_componentWillReceiveProps()` вызывается до того, как смонтированный компонент получит новые пропсы. Чтобы обновить состояние в ответ на изменение пропсов (например, для его сброса), можно сравнить `this.props` с `nextProps` и обновить состояние в этом методе с помощью `this.setState()`. -Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes. +Обратите внимание, если родительский компонент заставляет ваш компонент повторно рендериться, метод будет вызываться, даже если пропсы не изменились. Убедитесь, что сравниваете текущие и следующие значения, если вы хотите обрабатывать изменения. -React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props during [mounting](#mounting). It only calls this method if some of component's props may update. Calling `this.setState()` generally doesn't trigger `UNSAFE_componentWillReceiveProps()`. +Во время [монтирования](#mounting) React не вызывает `UNSAFE_componentWillReceiveProps()` с начальными значениями пропсов. Этот метод вызывается, если некоторые пропсы компонента могут обновиться. Вызов `this.setState()` обычно не вызывает `UNSAFE_componentWillReceiveProps()`. * * * @@ -476,27 +471,27 @@ React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props durin UNSAFE_componentWillUpdate(nextProps, nextState) ``` -> Note +> Примечание: > -> This lifecycle was previously named `componentWillUpdate`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components. +> Этот метод жизненного цикла раньше назывался `componentWillUpdate`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles). -`UNSAFE_componentWillUpdate()` is invoked just before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render. +`UNSAFE_componentWillUpdate()` вызывается сразу перед рендером при получении новых пропсов или состояния. В этом методе можно выполнить некоторую подготовку перед обновлением. Этот метод не вызывается при первом рендере. -Note that you cannot call `this.setState()` here; nor should you do anything else (e.g. dispatch a Redux action) that would trigger an update to a React component before `UNSAFE_componentWillUpdate()` returns. +Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, вызывать `Redux action`). -Typically, this method can be replaced by `componentDidUpdate()`. If you were reading from the DOM in this method (e.g. to save a scroll position), you can move that logic to `getSnapshotBeforeUpdate()`. +Обычно, этот метод можно заменить на `componentDidUpdate()`. Вы можете использовать `getSnapshotBeforeUpdate()` для работы с DOM (например, запоминать положение прокрутки страницы). -> Note +> Примечание: > -> `UNSAFE_componentWillUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false. +> `UNSAFE_componentWillUpdate()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`. * * * -## Other APIs {#other-apis-1} +## Другие APIs {#other-apis-1} -Unlike the lifecycle methods above (which React calls for you), the methods below are the methods *you* can call from your components. +В отличие от методов жизненного цикла, представленных выше (React вызывает их сам), методы, приведённые ниже, можно вызывать из компонентов. -There are just two of them: `setState()` and `forceUpdate()`. +Их всего два: `setState()` и `forceUpdate()`. ### `setState()` {#setstate} @@ -504,21 +499,21 @@ There are just two of them: `setState()` and `forceUpdate()`. setState(updater[, callback]) ``` -`setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses. +`setState()` добавляет в очередь изменения в состоянии компонента. Также он указывает React, что компонент и его дочерние элементы должны быть повторно отрендерены с обновлённым состоянием. Этот метод используется для обновления интерфейса в ответ на обработчики событий и ответы сервера. -Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately. +Думайте о `setState()`, как о *запросе*, а не как о команде немедленного обновления компонента. Для увеличения производительности React может задержать его выполнение, а затем обновить несколько компонентов за один проход. React не гарантирует моментальное применение изменений в состоянии. -`setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall. Instead, use `componentDidUpdate` or a `setState` callback (`setState(updater, callback)`), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the `updater` argument below. +`setState()` не всегда обновляет компонент сразу. Этот метод может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушки. Вместо этого используйте `componentDidUpdate()` или колбек `setState()` (`setState(updater, callback)`). Любой из этих вариантов можно запустить для применения обновления. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. -`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns `false`. If mutable objects are being used and conditional rendering logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders. +`setState()` всегда приводит к повторному рендеру, пока `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры. -The first argument is an `updater` function with the signature: +Первым аргументом передаётся функция `updater`, которая имеет следующий вид: ```javascript (state, props) => stateChange ``` -`state` is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `state` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`: +`state` – ссылка на состояние компонента при изменении. Она не должна мутировать. Изменения должны быть в виде нового объекта на основе входных данных из `state` и` props`. Предположим, что мы хотели бы увеличить значение состояния с помощью `props.step`: ```javascript this.setState((state, props) => { @@ -526,23 +521,23 @@ this.setState((state, props) => { }); ``` -Both `state` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `state`. +И `state`, и` props`, полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с `state`. -The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead. +Второй параметр в `setState()` - дополнительная колбек-функция, которая выполняется после того, как исполнится `setState` и произойдет повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. -You may optionally pass an object as the first argument to `setState()` instead of a function: +В качестве первого аргументы `setState()`, вместо функции, вы можете передать объект: ```javascript setState(stateChange[, callback]) ``` -This performs a shallow merge of `stateChange` into the new state, e.g., to adjust a shopping cart item quantity: +В нём образуется новое состояние после поверхностного объединения с `stateChange`. Например, установим количество товаров в корзине: ```javascript this.setState({quantity: 2}) ``` -This form of `setState()` is also asynchronous, and multiple calls during the same cycle may be batched together. For example, if you attempt to increment an item quantity more than once in the same cycle, that will result in the equivalent of: +Эта форма записи `setState()` также асинхронна, и несколько вызовов в течение одного цикла могут быть объединены вместе. Например, вам нужно увеличить количество элементов несколько раз в одном цикле. Результат этого можно представить так: ```javaScript Object.assign( @@ -553,7 +548,7 @@ Object.assign( ) ``` -Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form, instead: +Последующие вызовы будут переопределять значения из предыдущих вызовов того же цикла. Из-за этого количество увеличится только один раз. В случае, если следующее состояние зависит от текущего, мы рекомендуем использовать форму функции обновления: ```js this.setState((state) => { @@ -561,11 +556,11 @@ this.setState((state) => { }); ``` -For more detail, see: +Для более подробной информации смотрите: -* [State and Lifecycle guide](/docs/state-and-lifecycle.html) -* [In depth: When and why are `setState()` calls batched?](https://stackoverflow.com/a/48610973/458193) -* [In depth: Why isn't `this.state` updated immediately?](https://github.com/facebook/react/issues/11527#issuecomment-360199710) +* [Руководство по состоянию и жизненному циклу](/docs/state-and-lifecycle.html) +* [Продвинутый уровень: когда и почему группируются вызовы `setState()`?](https://stackoverflow.com/a/48610973/458193) +* [Продвинутый уровень: почему `this.state` не обновляется сразу?](https://github.com/facebook/react/issues/11527#issuecomment-360199710) * * * @@ -575,19 +570,19 @@ For more detail, see: component.forceUpdate(callback) ``` -By default, when your component's state or props change, your component will re-render. If your `render()` method depends on some other data, you can tell React that the component needs re-rendering by calling `forceUpdate()`. +По умолчанию, при изменении состояния компонента или пропсов, происходит повторный рендер. Если ваш метод `render()` зависит от некоторых других данных, вы можете указать React необходимость в повторном рендере, вызвав `forceUpdate()`. -Calling `forceUpdate()` will cause `render()` to be called on the component, skipping `shouldComponentUpdate()`. This will trigger the normal lifecycle methods for child components, including the `shouldComponentUpdate()` method of each child. React will still only update the DOM if the markup changes. +Вызов `forceUpdate()` приведёт к выполнению метода `render()` в компоненте, пропуская `shouldComponentUpdate()`. Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая `shouldComponentUpdate()` каждого дочернего компонента. React по-прежнему будет обновлять DOM только в случае изменения разметки. -Normally you should try to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`. +Чаще всего, `forceUpdate()` не используется. Вместо этого используются в `render()` данные из `this.props` и `this.state`. * * * -## Class Properties {#class-properties-1} +## Свойства класса {#class-properties-1} ### `defaultProps` {#defaultprops} -`defaultProps` can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example: +`defaultProps` можно определить как свойство самого класса компонента, которое позволяет установить пропсы класса по умолчанию. Это используется для неопределённых пропсов, но не для пропсов со значением null. Например: ```js class CustomButton extends React.Component { @@ -595,11 +590,11 @@ class CustomButton extends React.Component { } CustomButton.defaultProps = { - color: 'blue' + color: 'синий' }; ``` -If `props.color` is not provided, it will be set by default to `'blue'`: +Если `props.color` не передаётся, по умолчанию установится `'синий'`: ```js render() { @@ -607,7 +602,7 @@ If `props.color` is not provided, it will be set by default to `'blue'`: } ``` -If `props.color` is set to null, it will remain null: +Если `props.color` имеет значение `null`, оно останется `null`: ```js render() { @@ -619,24 +614,24 @@ If `props.color` is set to null, it will remain null: ### `displayName` {#displayname} -The `displayName` string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see [Wrap the Display Name for Easy Debugging](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) for details. +Строка `displayName` используется в сообщениях для отладки. Обычно вам не нужно её явно указывать. По умолчанию используется имя функции или класса, указанное при определении компонента. Если вам нужно установить его явно, например, для отладки или создания компонента высшего порядка, посмотрите раздел [Обертка отображаемого имени для простой отладки](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging). * * * -## Instance Properties {#instance-properties-1} +## Свойства экземпляра {#instance-properties-1} ### `props` {#props} -`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/docs/components-and-props.html) for an introduction to props. +`this.props` содержит свойства, которые были определены вызывающим элементом этого компонента. Подробнее об этом можно узнать в разделе [Компоненты и пропсы](/docs/components-and-props.html) -In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself. +Существует специальный проп `this.props.children`, который обычно определяется дочерними тегами в JSX-выражении, а не в самом теге. ### `state` {#state} -The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object. +Состояние содержит данные, конкретные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем. Оно должно быть простым объектом JavaScript. -If some value isn't used for rendering or data flow (for example, a timer ID), you don't have to put it in the state. Such values can be defined as fields on the component instance. +Вам не нужно вставлять в состояние значение, которое не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента. -See [State and Lifecycle](/docs/state-and-lifecycle.html) for more information about the state. +Дополнительную информацию можно найти в разделе [Состояние и жизненный цикл](/docs/state-and-lifecycle.html). -Never mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable. +Никогда не мутируйте `this.state` напрямую, так как позднее вызов `setState()` может заменить мутацию, которую вы сделали. Относитесь к `this.state` как к иммутабельному объекту. diff --git a/examples/react-component-reference/get-snapshot-before-update.js b/examples/react-component-reference/get-snapshot-before-update.js index cf1fb2335..6dbdf5e02 100644 --- a/examples/react-component-reference/get-snapshot-before-update.js +++ b/examples/react-component-reference/get-snapshot-before-update.js @@ -5,8 +5,8 @@ class ScrollingList extends React.Component { } getSnapshotBeforeUpdate(prevProps, prevState) { - // Are we adding new items to the list? - // Capture the scroll position so we can adjust scroll later. + // Добавляются ли в список новые элементы? + // Запоминаем значение прокрутки, чтобы использовать его позже. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; @@ -15,9 +15,9 @@ class ScrollingList extends React.Component { } componentDidUpdate(prevProps, prevState, snapshot) { - // If we have a snapshot value, we've just added new items. - // Adjust scroll so these new items don't push the old ones out of view. - // (snapshot here is the value returned from getSnapshotBeforeUpdate) + // Если снимок (snapshot) передан, значит элементы добавлены. + // Выравниваем прокрутку так, чтобы новые элементы не выталкивали старые. + // (снимок – значение, переданное из getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; From db3916eae336d7dc8f277f759d0c00d1274d8aba Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Thu, 14 Feb 2019 21:24:09 +0300 Subject: [PATCH 02/18] fix after review --- content/docs/reference-react-component.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 1d0027de5..fd45a8103 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -19,7 +19,7 @@ redirect_from: ## Обзор {#overview} -React позволяет определять компоненты как классы или функции. В настоящее время классовые компоненты имеют больше возможностей. Они разобраны на этой странице. Чтобы определить такой компонент, необходимо расширить `React.Component`: +React позволяет определять компоненты как классы или функции. В настоящее время классовые компоненты имеют больше возможностей. Они разобраны на этой странице. Чтобы определить такой компонент, необходимо отнаследоваться от `React.Component`: ```js class Welcome extends React.Component { @@ -81,12 +81,12 @@ class Welcome extends React.Component { #### Обработка ошибок {#error-handling} -Эти методы вызываются если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. +Эти методы вызываются, если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. - [`static getDerivedStateFromError()`](#static-getderivedstatefromerror) - [`componentDidCatch()`](#componentdidcatch) -### Другие API {#other-apis} +### Другие методы API {#other-apis} В каждом компоненте доступны методы API: @@ -127,7 +127,7 @@ render() - **Строки и числа.** Рендерит текстовые DOM-узлы. - **Booleans or `null`**. Ничего не рендерит. (Обычно необходим для поддержки паттерна `return test && `, где `test` – логическое значение.) -Функция `render()` должна быть *чистой*. Это означает, что она: не изменяет состояние компонента, всегда возвращает один и тот же результат, не взаимодействует напрямую с браузером. +Функция `render()` должна быть *чистой*. Это означает, что она не изменяет состояние компонента, всегда возвращает один и тот же результат, не взаимодействует напрямую с браузером. Взаимодействовать с браузером необходимо в `componentDidMount()` или других методах жизненного цикла. *Чистый* `render()` делает компонент понятным. @@ -145,7 +145,7 @@ constructor(props) **Вы можете не использовать конструктор в React-компоненте, если вы не определяете состояние или не привязываете методы.** -Конструктор компонента React вызывается до того, как компонент будет примонтирован. Вначале конструктора необходимо вызывать `super(props)`. Если это не сделать, `this.props` не будет определен. Это может привести к багам. +Конструктор компонента React вызывается до того, как компонент будет примонтирован. В начале конструктора необходимо вызывать `super(props)`. Если это не сделать, `this.props` не будет определен. Это может привести к багам. Конструкторы в React обычно используют для двух целей: @@ -259,7 +259,7 @@ shouldComponentUpdate(nextProps, nextState) Этот метод нужен только для **[повышения производительности](/docs/optimizing-performance.html).**. Но не опирайтесь на его возможность «предотвратить» рендер, это может привести к багам. Вместо этого **используйте [`PureComponent`](/docs/react-api.html#reactpurecomponent)**, который позволяет не описывать поведение `shouldComponentUpdate()` вручную. `PureComponent` поверхностно сравнивает пропсы и состояние и позволяет не пропустить необходимое обновление. -Если вы уверены, что хотите написать его вручную, вы можете сравнить `this.props` с `nextProps` и `this.state` с `nextState`. Верните `false` что бы пропустить обновление React. Возвращение `false` не предотвращает повторный рендер дочерних компонентов при изменении *их* состояния. +Если вы уверены, что хотите написать его вручную, вы можете сравнить `this.props` с `nextProps`, а `this.state` с `nextState`. Верните `false` чтобы пропустить обновление React. Возврат `false` не предотвращает повторный рендер дочерних компонентов при изменении *их* состояния. Мы не рекомендуем делать глубокое сравнение или использовать `JSON.stringify()` в `shouldComponentUpdate()`. Это неэффективно и плохо влияет на производительность. @@ -275,7 +275,7 @@ static getDerivedStateFromProps(props, state) `getDerivedStateFromProps` вызывается сразу перед вызовом метода `render`, как при начальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновления состояния или null, чтобы ничего не обновлять. -Этот метод существует для [редких случаев](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state), когда изменения в пропсах не сразу влияют на состояние. Например, это подойдёт для реализации компонента ``, который сравнивает свои предыдущие и следующие дочерние компоненты, чтобы решить, какой из них нужно анимировать. +Этот метод существует для [редких случаев](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state), когда состояние зависит от изменений в пропсах. Например, это подойдёт для реализации компонента ``, который сравнивает свои предыдущие и следующие дочерние компоненты, чтобы решить, какой из них нужно анимировать. Производное состояние приводит к сложному коду и делает ваши компоненты сложными для понимания. Убедитесь, что вы знакомы с [простыми альтернативами:](/blog/2018/06/07/you-probably-dont-need-derived-state.html) @@ -479,7 +479,7 @@ UNSAFE_componentWillUpdate(nextProps, nextState) Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, вызывать `Redux action`). -Обычно, этот метод можно заменить на `componentDidUpdate()`. Вы можете использовать `getSnapshotBeforeUpdate()` для работы с DOM (например, запоминать положение прокрутки страницы). +Обычно этот метод можно заменить на `componentDidUpdate()`. Вы можете использовать `getSnapshotBeforeUpdate()` для работы с DOM (например, запоминать положение прокрутки страницы). > Примечание: > @@ -525,7 +525,7 @@ this.setState((state, props) => { Второй параметр в `setState()` - дополнительная колбек-функция, которая выполняется после того, как исполнится `setState` и произойдет повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. -В качестве первого аргументы `setState()`, вместо функции, вы можете передать объект: +В качестве первого аргумента `setState()`, вместо функции, вы можете передать объект: ```javascript setState(stateChange[, callback]) @@ -570,7 +570,7 @@ this.setState((state) => { component.forceUpdate(callback) ``` -По умолчанию, при изменении состояния компонента или пропсов, происходит повторный рендер. Если ваш метод `render()` зависит от некоторых других данных, вы можете указать React необходимость в повторном рендере, вызвав `forceUpdate()`. +По умолчанию при изменении состояния компонента или пропсов, происходит повторный рендер. Если ваш метод `render()` зависит от некоторых других данных, вы можете указать React необходимость в повторном рендере, вызвав `forceUpdate()`. Вызов `forceUpdate()` приведёт к выполнению метода `render()` в компоненте, пропуская `shouldComponentUpdate()`. Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая `shouldComponentUpdate()` каждого дочернего компонента. React по-прежнему будет обновлять DOM только в случае изменения разметки. From ce9c40f3a1869a377f6bbb57853c066818e953ba Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Fri, 15 Feb 2019 10:12:24 +0300 Subject: [PATCH 03/18] fix after review --- content/docs/reference-react-component.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index fd45a8103..cb72e3ad4 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -477,7 +477,7 @@ UNSAFE_componentWillUpdate(nextProps, nextState) `UNSAFE_componentWillUpdate()` вызывается сразу перед рендером при получении новых пропсов или состояния. В этом методе можно выполнить некоторую подготовку перед обновлением. Этот метод не вызывается при первом рендере. -Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, вызывать `Redux action`). +Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, отправка действия Redux). Обычно этот метод можно заменить на `componentDidUpdate()`. Вы можете использовать `getSnapshotBeforeUpdate()` для работы с DOM (например, запоминать положение прокрутки страницы). @@ -503,7 +503,7 @@ setState(updater[, callback]) Думайте о `setState()`, как о *запросе*, а не как о команде немедленного обновления компонента. Для увеличения производительности React может задержать его выполнение, а затем обновить несколько компонентов за один проход. React не гарантирует моментальное применение изменений в состоянии. -`setState()` не всегда обновляет компонент сразу. Этот метод может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушки. Вместо этого используйте `componentDidUpdate()` или колбек `setState()` (`setState(updater, callback)`). Любой из этих вариантов можно запустить для применения обновления. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. +Метод `setState()` не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушки. Вместо этого используйте `componentDidUpdate()` или колбэк `setState()` (`setState(updater, callback)`). Любой из этих вариантов можно запустить для применения обновления. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. `setState()` всегда приводит к повторному рендеру, пока `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры. @@ -521,9 +521,9 @@ this.setState((state, props) => { }); ``` -И `state`, и` props`, полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с `state`. +Как `state`, так и` props`, полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с `state`. -Второй параметр в `setState()` - дополнительная колбек-функция, которая выполняется после того, как исполнится `setState` и произойдет повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. +Второй параметр в `setState()` - дополнительный колбэк, который выполняется после того, как исполнится `setState` и произойдет повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. В качестве первого аргумента `setState()`, вместо функции, вы можете передать объект: From b2a4201dd534be8db0571a5a20be7e533bfa2a5b Mon Sep 17 00:00:00 2001 From: Anton Akhatov Date: Fri, 15 Feb 2019 20:42:29 +0300 Subject: [PATCH 04/18] fix after review --- content/docs/reference-react-component.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index cb72e3ad4..a930d6617 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -197,7 +197,7 @@ componentDidMount() Этот метод подходит для настройки подписок. Но не забудьте отписаться от них в `componentWillUnmount()`. -Вы **можете сразу вызвать setState()** в `componentDidMount()`. Это вызовет дополнительный рендер перед тем как браузер обновит экран. Гарантируется, что пользователь не увидит промежуточное состояние, даже если `render()` будет вызываться дважды. Используйте этот подход с осторожностью, он может вызвать проблемы с производительностью. В большинстве случаев начальное состояние лучше объявить в `constructor()`. Однако, это может быть необходимо для случаев, когда нужно измерить размер или положение DOM-узла на основе которого происходит рендер. Например, для модальных окон или всплывающих подсказок. +Вы **можете сразу вызвать setState()** в `componentDidMount()`. Это вызовет дополнительный рендер перед тем, как браузер обновит экран. Гарантируется, что пользователь не увидит промежуточное состояние, даже если `render()` будет вызываться дважды. Используйте этот подход с осторожностью, он может вызвать проблемы с производительностью. В большинстве случаев начальное состояние лучше объявить в `constructor()`. Однако, это может быть необходимо для случаев, когда нужно измерить размер или положение DOM-узла, на основе которого происходит рендер. Например, для модальных окон или всплывающих подсказок. * * * @@ -245,7 +245,7 @@ componentWillUnmount() ### Редко используемые методы жизненного цикла {#rarely-used-lifecycle-methods} -Методы из этого раздела используются редко. В большинстве компонентов они не нужны, хотя иногда бывают полезны. **Вы можете увидеть большинство приведённых ниже методов на [этой диаграмме жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/), если наверху страницы нажмете на чекбокс «Show less common lifecycles».** +Методы из этого раздела используются редко. В большинстве компонентов они не нужны, хотя иногда бывают полезны. **Вы можете увидеть большинство приведённых ниже методов на [этой диаграмме жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/), если наверху страницы нажмете на чекбокс «Показать менее популярные методы жизненного цикла».** ### `shouldComponentUpdate()` {#shouldcomponentupdate} @@ -301,7 +301,7 @@ getSnapshotBeforeUpdate(prevProps, prevState) `getSnapshotBeforeUpdate()` вызывается прямо перед этапом «фиксирования» (например, перед добавлением в DOM). Он позволяет вашему компоненту брать некоторую информацию из DOM (например, положение прокрутки) перед её возможным изменением. Любое значение, возвращаемое этим методом жизненного цикла, будет передано как параметр `componentDidUpdate()`. -Это применяется редно, но может быть полезно в таких интерфейсах, как цепочка сообщений в чатах, в которых позиция прокрутки обрабатывается особым образом. +Это применяется редко, но может быть полезно в таких интерфейсах, как цепочка сообщений в чатах, в которых позиция прокрутки обрабатывается особым образом. Значение снимка (или `null`) должно быть возвращено. @@ -523,7 +523,7 @@ this.setState((state, props) => { Как `state`, так и` props`, полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с `state`. -Второй параметр в `setState()` - дополнительный колбэк, который выполняется после того, как исполнится `setState` и произойдет повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. +Второй параметр в `setState()` - дополнительный колбэк, который выполняется после того, как исполнится `setState` и произойдёт повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`. В качестве первого аргумента `setState()`, вместо функции, вы можете передать объект: From 66f73b98fbf6b0f9c0f2d1ca9aacd9b3ec184b00 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 21:52:44 +0300 Subject: [PATCH 05/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index a930d6617..b7bf3a28f 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -287,7 +287,7 @@ static getDerivedStateFromProps(props, state) Этот метод не имеет доступа к экземпляру компонента. Чтобы использовать пропсы, состояние и методы класса в `getDerivedStateFromProps()`, их нужно вынести за пределы класса в виде чистых функций. -Если вы хотите переиспользовать код между `getDerivedStateFromProps()` и другими методами класса, извлекая чистые функции пропсов и состояния компонента вне определения класса. +Если вы хотите переиспользовать код между `getDerivedStateFromProps()` и другими методами класса, извлеките чистые функции пропсов и состояния компонента и поместите их вне определения класса. Обратите внимание, что этот метод запускается при каждом рендере, независимо от причины. Это отличается от метода `UNSAFE_componentWillReceiveProps`, который запускается только при повторном рендере родительского компонента, а не в результате вызова `setState`. From 04489f17040bf423cc481436e2db9421b137d2a7 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 21:53:23 +0300 Subject: [PATCH 06/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index b7bf3a28f..df51920f0 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -630,7 +630,7 @@ CustomButton.defaultProps = { Состояние содержит данные, конкретные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем. Оно должно быть простым объектом JavaScript. -Вам не нужно вставлять в состояние значение, которое не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента. +Вам не нужно вставлять в состояние значение, если оно не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента. Дополнительную информацию можно найти в разделе [Состояние и жизненный цикл](/docs/state-and-lifecycle.html). From 2f016f99f9b79178f6ceacf3d92e4eac1d425be6 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 21:54:26 +0300 Subject: [PATCH 07/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index df51920f0..0cb0503b6 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -582,7 +582,7 @@ component.forceUpdate(callback) ### `defaultProps` {#defaultprops} -`defaultProps` можно определить как свойство самого класса компонента, которое позволяет установить пропсы класса по умолчанию. Это используется для неопределённых пропсов, но не для пропсов со значением null. Например: +`defaultProps` можно определить как свойство самого класса компонента, которое позволяет установить пропсы класса по умолчанию. Это используется для неопределённых (`undefined`) пропсов, но не для пропсов со значением `null`. Например: ```js class CustomButton extends React.Component { From cc42a08b631e0ab62b4140cb25e7078dea511e90 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 21:58:48 +0300 Subject: [PATCH 08/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 0cb0503b6..aa1fa26a4 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -315,7 +315,7 @@ getSnapshotBeforeUpdate(prevProps, prevState) ### Предохранители {#error-boundaries} -[Предохранители](/docs/error-boundaries.html) – это React-компоненты, которые перехватывают JavaScript-ошибки в любом месте их дочернего дерева компонентов. Затем логируют эти ошибки и отображают запасной интерфейс вместо разрушенного дерева компонентов. Предохранители отлавливают ошибки при рендере, в методах жизненного цикла и в конструкторах всего дерева под ними. +[Предохранители](/docs/error-boundaries.html) – это React-компоненты, которые перехватывают JavaScript-ошибки в любом месте их дочернего дерева компонентов. Затем логируют эти ошибки и отображают запасной интерфейс вместо "поломанного" дерева компонентов. Предохранители отлавливают ошибки при рендере, в методах жизненного цикла и в конструкторах всего дерева под ними. Классовый компонент становится предохранителем, если в нём используются методы жизненного цикла `static getDerivedStateFromError()` и (или) `componentDidCatch()`. Обновление состояния в этом методе жизненного цикла позволяет перехватить необработанную JavaScript-ошибку в дереве ниже и отобразить запасной интерфейс. From 69aeb37364b6b310b7a7c7e8fb9efd709af64ffb Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:00:17 +0300 Subject: [PATCH 09/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index aa1fa26a4..10eda6826 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -319,7 +319,7 @@ getSnapshotBeforeUpdate(prevProps, prevState) Классовый компонент становится предохранителем, если в нём используются методы жизненного цикла `static getDerivedStateFromError()` и (или) `componentDidCatch()`. Обновление состояния в этом методе жизненного цикла позволяет перехватить необработанную JavaScript-ошибку в дереве ниже и отобразить запасной интерфейс. -Используйте предохранители только для обработки неожиданных исключений, **не используйте их для управления потоком.** +Используйте предохранители только для обработки неожиданных исключений, **не используйте их для управления потоком исполнения в вашем приложении.** Подробнее в разделе [*Предохранители в React 16*](/blog/2017/07/26/error-handling-in-react-16.html). From ef9849b8e7456784a9e0a175fb0cd4dc6c2cf890 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:02:51 +0300 Subject: [PATCH 10/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 10eda6826..354fbca2f 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -503,7 +503,7 @@ setState(updater[, callback]) Думайте о `setState()`, как о *запросе*, а не как о команде немедленного обновления компонента. Для увеличения производительности React может задержать его выполнение, а затем обновить несколько компонентов за один проход. React не гарантирует моментальное применение изменений в состоянии. -Метод `setState()` не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушки. Вместо этого используйте `componentDidUpdate()` или колбэк `setState()` (`setState(updater, callback)`). Любой из этих вариантов можно запустить для применения обновления. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. +Метод `setState()` не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушкой. Вместо этого используйте `componentDidUpdate()` или колбэк `setState()` (`setState(updater, callback)`), каждый из которых гарантированно вызывается после того как было применено обновление. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. `setState()` всегда приводит к повторному рендеру, пока `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры. From ccec7d9e93c68b2e12626d1c4087b13d0796c8ed Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:08:09 +0300 Subject: [PATCH 11/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 354fbca2f..041af956b 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -513,7 +513,7 @@ setState(updater[, callback]) (state, props) => stateChange ``` -`state` – ссылка на состояние компонента при изменении. Она не должна мутировать. Изменения должны быть в виде нового объекта на основе входных данных из `state` и` props`. Предположим, что мы хотели бы увеличить значение состояния с помощью `props.step`: +`state` – ссылка на состояние компонента при изменении. Объект состояния не должен мутировать. Изменения должны проявляться в виде нового объекта на основе входных данных из `state` и` props`. Предположим, что мы хотели бы увеличить значение состояния с помощью `props.step`: ```javascript this.setState((state, props) => { From 1e0baa9ccbcd5411dc871cbab1ee71efb0d82c02 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:14:32 +0300 Subject: [PATCH 12/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 041af956b..52ee220a7 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -628,7 +628,7 @@ CustomButton.defaultProps = { ### `state` {#state} -Состояние содержит данные, конкретные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем. Оно должно быть простым объектом JavaScript. +Состояние содержит данные, специфичные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем и должно быть простым объектом JavaScript. Вам не нужно вставлять в состояние значение, если оно не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента. From 33db0fd85957a334217fa2103775cf441f3eb542 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:15:11 +0300 Subject: [PATCH 13/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 52ee220a7..1fe0f2a1d 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -209,7 +209,7 @@ componentDidUpdate(prevProps, prevState, snapshot) `componentDidUpdate()` вызывается сразу после обновления. Не вызывается при первом рендере. -Метод позволяет работать с DOM при обновлении компонента. Также он подходит для выполнения сетевых запросов, которые необходимы для сравнения текущих пропсов с предыдущими. Запрос можно не делать, если пропсы не изменились. +Метод позволяет работать с DOM при обновлении компонента. Также он подходит для выполнения таких сетевых запросов, которые выполняются на основании результата сравнения текущих пропсов с предыдущими. Если пропсы не изменились, новый запрос может и не требоваться. ```js componentDidUpdate(prevProps) { From 2a478b4e2844f5752c31025fd98d3e11b27290e4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:15:27 +0300 Subject: [PATCH 14/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 1fe0f2a1d..48e6c77c0 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -193,7 +193,7 @@ constructor(props) { componentDidMount() ``` -`componentDidMount()` вызывается сразу после монтирования (компонент вставлен в DOM). В этом методе должны происходить действия, которые требуют наличия DOM-узлов. Это хорошее место для создания сетевых запросов. +`componentDidMount()` вызывается сразу после монтирования (то есть, вставки компонента в DOM). В этом методе должны происходить действия, которые требуют наличия DOM-узлов. Это хорошее место для создания сетевых запросов. Этот метод подходит для настройки подписок. Но не забудьте отписаться от них в `componentWillUnmount()`. From 9d282f01e1e100d1c2642d7b51721b791d79db6d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:19:51 +0300 Subject: [PATCH 15/18] Apply suggestions from code review Co-Authored-By: gcor --- content/docs/reference-react-component.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 48e6c77c0..095dc7be6 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -39,11 +39,11 @@ class Welcome extends React.Component { ### Жизненный цикл компонента {#the-component-lifecycle} -Каждый компонент имеет несколько «методов жизненного цикла». Переопределение этих методов позволяет выполнять код в конкретное время в процессе. **Вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) как шпаргалку.** Далее на странице **полужирным шрифтом** выделены самые распространённые методы жизненного цикла. +Каждый компонент имеет несколько «методов жизненного цикла». Переопределение такого метода позволяет выполнять код на конкретном этапе этого процесса. **Вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) как шпаргалку.** Далее на странице **полужирным шрифтом** выделены самые распространённые методы жизненного цикла. #### Монтирование {#mounting} -Эти методы вызываются в следующем порядке при создании экземпляра компонента и его вставки в DOM: +При создании экземпляра компонента и его вставке в DOM, следующие методы вызываются в установленном порядке: - [**`constructor()`**](#constructor) - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops) @@ -58,7 +58,7 @@ class Welcome extends React.Component { #### Обновление {#updating} -Обновление происходит при изменении пропсов или состояния. Эти методы вызываются в следующем порядке при повторном рендере компонента: +Обновление происходит при изменении пропсов или состояния. Следующие методы вызываются в установленном порядке при повторном рендере компонента: - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops) - [`shouldComponentUpdate()`](#shouldcomponentupdate) @@ -81,7 +81,7 @@ class Welcome extends React.Component { #### Обработка ошибок {#error-handling} -Эти методы вызываются, если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. +Следующие методы вызываются, если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. - [`static getDerivedStateFromError()`](#static-getderivedstatefromerror) - [`componentDidCatch()`](#componentdidcatch) @@ -223,7 +223,7 @@ componentDidUpdate(prevProps) { Вы **можете сразу вызвать setState()** в `componentDidUpdate()`, если **оно находится в условии**, как в примере выше. Иначе может произойти бесконечный цикл. Это повлечёт за собой дополнительный, незаметный для пользователя, рендер, который повлияет на производительность компонента. Используйте пропсы для «отражения» некоторого состояния в пропсах, приходящих сверху. Подробнее о том, [почему копирование пропсов в состояние вызывает баги](/blog/2018/06/07/you-probably-dont-need-derived-state.html). -В `componentDidUpdate()` может быть доступен третий параметр `snapshot`, только в том случае, если реализован метод жизненного цикла `getSnapshotBeforeUpdate()` (используется редко). +В тех редких случаях когда реализован метод жизненного цикла `getSnapshotBeforeUpdate()`, его результат передаётся `componentDidUpdate()` в качестве третьего параметра `snapshot`. > Примечание: > @@ -237,7 +237,7 @@ componentDidUpdate(prevProps) { componentWillUnmount() ``` -`componentWillUnmount()` вызывается сразу перед размонтированием и удалением компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок, созданных в `componentDidMount()`. +`componentWillUnmount()` вызывается непосредственно перед размонтированием и удалением компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок, созданных в `componentDidMount()`. **Не используйте setState()** в `componentWillUnmount()`, так как компонент никогда не рендерится повторно. После того, как экземпляр компонента будет размонтирован, он никогда не будет примонтирован снова. @@ -273,7 +273,7 @@ shouldComponentUpdate(nextProps, nextState) static getDerivedStateFromProps(props, state) ``` -`getDerivedStateFromProps` вызывается сразу перед вызовом метода `render`, как при начальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновления состояния или null, чтобы ничего не обновлять. +`getDerivedStateFromProps` вызывается непосредственно перед вызовом метода `render`, как при начальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновления состояния или null, чтобы ничего не обновлять. Этот метод существует для [редких случаев](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state), когда состояние зависит от изменений в пропсах. Например, это подойдёт для реализации компонента ``, который сравнивает свои предыдущие и следующие дочерние компоненты, чтобы решить, какой из них нужно анимировать. @@ -429,7 +429,7 @@ UNSAFE_componentWillMount() > > Этот метод жизненного цикла раньше назывался `componentWillMount`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles). -`UNSAFE_componentWillMount()` вызывается сразу перед монтированием. Он вызывается перед `render()`, поэтому синхронный вызов `setState()` в этом методе не вызовет дополнительный рендер. Для инициализации состояния мы рекомендуем использовать `constructor()`. +`UNSAFE_componentWillMount()` вызывается непосредственно перед монтированием. Он вызывается перед `render()`, поэтому синхронный вызов `setState()` в этом методе не вызовет дополнительный рендер. Для инициализации состояния мы рекомендуем использовать `constructor()`. Избегайте добавления каких-либо побочных эффектов или подписок в этом методе. Вместо этого используйте `componentDidMount()`. @@ -475,7 +475,7 @@ UNSAFE_componentWillUpdate(nextProps, nextState) > > Этот метод жизненного цикла раньше назывался `componentWillUpdate`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles). -`UNSAFE_componentWillUpdate()` вызывается сразу перед рендером при получении новых пропсов или состояния. В этом методе можно выполнить некоторую подготовку перед обновлением. Этот метод не вызывается при первом рендере. +`UNSAFE_componentWillUpdate()` вызывается непосредственно перед рендером при получении новых пропсов или состояния. В этом методе можно выполнить некоторую подготовку перед обновлением. Этот метод не вызывается при первом рендере. Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, отправка действия Redux). @@ -505,7 +505,7 @@ setState(updater[, callback]) Метод `setState()` не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушкой. Вместо этого используйте `componentDidUpdate()` или колбэк `setState()` (`setState(updater, callback)`), каждый из которых гарантированно вызывается после того как было применено обновление. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже. -`setState()` всегда приводит к повторному рендеру, пока `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры. +`setState()` всегда приводит к повторному рендеру, если только `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры. Первым аргументом передаётся функция `updater`, которая имеет следующий вид: From 0b087dad4b428b19a2a68d2a8a96e4d528408dda Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 22:20:27 +0300 Subject: [PATCH 16/18] Update content/docs/reference-react-component.md Co-Authored-By: gcor --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 095dc7be6..89248b07f 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -449,7 +449,7 @@ UNSAFE_componentWillReceiveProps(nextProps) > Примечание: > -> Частое использование этого метода жизненного цикла приводило к багам +> Использование этого метода жизненного цикла часто приводило к багам > > * Чтобы **выполнить побочный эффект при изменении пропсов** (например, сетевой запрос или анимацию) используйте [`componentDidUpdate`](#componentdidupdate). > * Чтобы **повторно вычислить данные при изменении пропсов** вместо `componentWillReceiveProps` используйте [функцию мемоизации](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization). From ecd5a45392a01b37671e0358c616ca520a847a4e Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 20 Feb 2019 22:23:41 +0300 Subject: [PATCH 17/18] Update reference-react-component.md --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 89248b07f..7a68ba1c6 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -622,7 +622,7 @@ CustomButton.defaultProps = { ### `props` {#props} -`this.props` содержит свойства, которые были определены вызывающим элементом этого компонента. Подробнее об этом можно узнать в разделе [Компоненты и пропсы](/docs/components-and-props.html) +`this.props` содержит свойства, которые были определены тем, кто вызывает этот компонент. Подробнее об этом можно узнать в разделе [Компоненты и пропсы](/docs/components-and-props.html) Существует специальный проп `this.props.children`, который обычно определяется дочерними тегами в JSX-выражении, а не в самом теге. From de52ff76ce001a5f56543ceb868908c17dd65e78 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Thu, 21 Feb 2019 22:50:07 +0300 Subject: [PATCH 18/18] Update reference-react-component.md --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 7a68ba1c6..cbe6b67d9 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -634,4 +634,4 @@ CustomButton.defaultProps = { Дополнительную информацию можно найти в разделе [Состояние и жизненный цикл](/docs/state-and-lifecycle.html). -Никогда не мутируйте `this.state` напрямую, так как позднее вызов `setState()` может заменить мутацию, которую вы сделали. Относитесь к `this.state` как к иммутабельному объекту. +Никогда не мутируйте `this.state` напрямую, так как более поздний вызов `setState()` может перезаписать эту мутацию. Относитесь к `this.state` как к иммутабельному объекту.