From 771dc46d741b5acd6ff3a538898a286ec830f87b Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 4 Mar 2019 04:13:32 +0300 Subject: [PATCH] =?UTF-8?q?Fixes=20and=20improvements=20=F0=9F=A7=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/error-boundaries.md | 2 +- content/docs/faq-ajax.md | 4 ++-- content/docs/fragments.md | 24 +++++++++---------- content/docs/handling-events.md | 8 +++---- content/docs/higher-order-components.md | 4 ++-- content/docs/hooks-effect.md | 2 +- content/docs/hooks-state.md | 10 ++++---- content/docs/introducing-jsx.md | 2 +- content/docs/reference-events.md | 4 ++-- ...nce-javascript-environment-requirements.md | 2 +- content/docs/reference-react-dom.md | 4 ++-- content/docs/reference-react.md | 4 ++-- content/docs/state-and-lifecycle.md | 4 ++-- 13 files changed, 37 insertions(+), 37 deletions(-) diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 085d1e3a3..5b79d9f20 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -147,7 +147,7 @@ class MyComponent extends React.Component { if (this.state.error) { return

Отловил ошибку.

} - return
Кликни меня
+ return
Нажми на меня
} } ``` diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index da84f449a..bae574d2c 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -23,8 +23,8 @@ category: FAQ ``` { "items": [ - { "id": 1, "name": "Apples", "price": "$2" }, - { "id": 2, "name": "Peaches", "price": "$5" } + { "id": 1, "name": "Яблоки", "price": "$2" }, + { "id": 2, "name": "Персики", "price": "$5" } ] } ``` diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 7c7b20955..599ccaa40 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -45,22 +45,22 @@ class Columns extends React.Component { render() { return (
- Hello - World + Привет + Мир
); } } ``` -результатом вывода `` будет: +Результатом вывода `
` будет: ```jsx
-
- + +
HelloWorldПриветМир
@@ -75,21 +75,21 @@ class Columns extends React.Component { render() { return ( - Hello - World + Привет + Мир ); } } ``` -результатом будет правильный вывод ``: +Результатом будет правильный вывод `
`: ```jsx
- - + +
HelloWorldПриветМир
``` @@ -103,8 +103,8 @@ class Columns extends React.Component { render() { return ( <> - Hello - World + Привет + Мир ); } diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 8395891c8..2f7abda27 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -33,7 +33,7 @@ redirect_from: ```html - Кликни меня + Нажми на меня ``` @@ -48,7 +48,7 @@ function ActionLink() { return ( - Кликни меня + Нажми на меня ); } @@ -110,7 +110,7 @@ class LoggingButton extends React.Component { render() { return ( ); } @@ -131,7 +131,7 @@ class LoggingButton extends React.Component { // Такой синтаксис гарантирует, что `this` привязан к handleClick. return ( ); } diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 144e921da..830ba5995 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -140,7 +140,7 @@ function withSubscription(WrappedComponent, selectData) { } componentDidMount() { - // ...который подписывется на оповещения... + // ...который подписывается на оповещения... DataSource.addChangeListener(this.handleChange); } @@ -390,6 +390,6 @@ import MyComponent, { someFunction } from './MyComponent.js'; ### Рефы не передаются {#refs-arent-passed-through} -По соглашению компоненты высшего порядка передают оборачеваемому компоненту все пропсы, кроме рефов. `ref` на самом деле не проп, как, например, `key`, и поэтому иначе обрабатывается React. Реф элемента, созданного компонентом из HOC, будет указывать на экземпляр ближайшего в иерархии контейнера, а не на оборачиваемый компонент. +По соглашению компоненты высшего порядка передают оборачиваемому компоненту все пропсы, кроме рефов. `ref` на самом деле не проп, как, например, `key`, и поэтому иначе обрабатывается React. Реф элемента, созданного компонентом из HOC, будет указывать на экземпляр ближайшего в иерархии контейнера, а не на оборачиваемый компонент. Вы можете решить эту проблему с помощью API-метода `React.forwardRef` (добавлен в React 16.3). [Узнать подробнее в главе Перенаправление рефов](/docs/forwarding-refs.html). diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 42cdf2b7f..36fa9e3e3 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -229,7 +229,7 @@ function FriendStatus(props) { >Совет > ->Нам не нужно возвращать именнованую функцию из эффекта. Мы назвали её «сбросом», чтобы объяснить её предназначение. Вы можете по желанию возвратить стрелочную функцию или назвать её как-то по другому. +>Нам не нужно возвращать именованную функцию из эффекта. Мы назвали её «сбросом», чтобы объяснить её предназначение. Вы можете по желанию возвратить стрелочную функцию или назвать её как-то по-другому. ## Итог {#recap} diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 90e25b6ef..61a95c9e3 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -21,7 +21,7 @@ function Example() {

Вы кликнули {count} раз(а)

); @@ -48,7 +48,7 @@ class Example extends React.Component {

Вы кликнули {this.state.count} раз(а)

); @@ -175,7 +175,7 @@ function Example() { ```js{1} ``` @@ -183,7 +183,7 @@ function Example() { ```js{1} ``` @@ -205,7 +205,7 @@ function Example() { 7:
8:

Вы кликнули {count} раз(а)

9: 12:
13: ); diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 674869e90..66246f1b9 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -157,7 +157,7 @@ const element = ( const element = React.createElement( 'h1', {className: 'greeting'}, - 'Hello, world!' + 'Привет, мир!' ); ``` diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 01e34c900..67cb04651 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -149,7 +149,7 @@ boolean shiftKey number which ``` -Свойство `key` может содержать любое из документированных значений в [спефицикации событий DOM третьего уровня](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). +Свойство `key` может содержать любое из документированных значений в [спецификации событий DOM третьего уровня](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). * * * @@ -229,7 +229,7 @@ onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut Свойства: -По определению из [спефицикации W3](https://www.w3.org/TR/pointerevents/), события курсора наследуют [события мыши](#mouse-events) со следующими свойствами: +По определению из [спецификации W3](https://www.w3.org/TR/pointerevents/), события курсора наследуют [события мыши](#mouse-events) со следующими свойствами: ```javascript number pointerId diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index dd995d019..076931a8e 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -18,7 +18,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( -

Hello, world!

, +

Привет, мир!

, document.getElementById('root') ); ``` diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index 74b9bc748..3f6cdc5d3 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -93,13 +93,13 @@ ReactDOM.unmountComponentAtNode(container) ```javascript ReactDOM.findDOMNode(component) ``` -Если этот компонент был смотирован в DOM, он возвращает соответствующий DOM элемент браузера. Этот метод полезен для чтения напрямую из DOM (например, чтение значений полей формы) или произведения измерений DOM. **В большинстве случаев, вы можете присоеденить реф к узлу DOM и полностью избежать использования `findDOMNode`.** +Если этот компонент был смотирован в DOM, он возвращает соответствующий DOM элемент браузера. Этот метод полезен для чтения напрямую из DOM (например, чтение значений полей формы) или произведения измерений DOM. **В большинстве случаев, вы можете присоединить реф к узлу DOM и полностью избежать использования `findDOMNode`.** Когда компонент рендерится в `null` или `false`, `findDOMNode` возвращает `null`. Когда компонент рендерится в строку, `findDOMNode` возвращает текстовый узел DOM, содержащий это значение. Начиная с React 16, компонент может возвращать фрагмент с несколькими дочерними элементами, и в этом случае `findDOMNode` возвращает DOM-узел, соответствующий первому непустому дочернему элементу. > Примечание: > -> `findDOMNode` работает только с смотированными компонентами (то есть компонентами, которые были размещены в DOM). Если вы попытаетесь вызвать этот метод для компонента, который ещё не был смонтирован (например, вызовете `findDOMNode()` в методе `render()` для компонента, который ещё не был создан), будет сгенерировано исключение. +> `findDOMNode` работает только с смонтированными компонентами (то есть компонентами, которые были размещены в DOM). Если вы попытаетесь вызвать этот метод для компонента, который ещё не был смонтирован (например, вызовете `findDOMNode()` в методе `render()` для компонента, который ещё не был создан), будет сгенерировано исключение. > > `findDOMNode` не может быть использован с функциональными компонентами. diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 8a9e64dc9..ba9df1b1b 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -126,7 +126,7 @@ const MyComponent = React.memo(function MyComponent(props) { `React.memo` — это [компонент высшего порядка](/docs/higher-order-components.html). Он похож на [`React.PureComponent`](#reactpurecomponent), но предназначен для функциональных компонентов. -Если ваш функциональный компонент всегда рендерит одинаковый результат для одих и тех же пропсов, вы можете обернуть его в вызов `React.memo` для повышения производительности в некоторых случаях, мемоизируя результат. Это значит, что React будет использовать результат последнего рендера, избегая повторного рендеринга. +Если ваш функциональный компонент всегда рендерит одинаковый результат для одних и тех же пропсов, вы можете обернуть его в вызов `React.memo` для повышения производительности в некоторых случаях, мемоизируя результат. Это значит, что React будет использовать результат последнего рендера, избегая повторного рендеринга. По умолчанию он поверхностно сравнивает вложенные объекты в объекте `props`. Если вы хотите контролировать сравнение, вы можете предать свою функцию сравнения в качестве второго аргумента. @@ -351,7 +351,7 @@ function MyComponent() { } ``` -Это задокументировано в нашем руководстве по [разделению кода](/docs/code-splitting.html#reactlazy). Обратите внимание, что `lazy` компоненты могут быть глубоко внутри дерева `Suspense` -- не нужно оборачивать каждый из них. Считается хорошей практикой использовать `` для индикции загрузки, а `lazy()` -- для разделения кода. +Это задокументировано в нашем руководстве по [разделению кода](/docs/code-splitting.html#reactlazy). Обратите внимание, что `lazy` компоненты могут быть глубоко внутри дерева `Suspense` -- не нужно оборачивать каждый из них. Считается хорошей практикой использовать `` для индикации загрузки, а `lazy()` -- для разделения кода. Хотя это не поддерживается сегодня, в будущем мы планируем позволить `Suspense` обрабатывать больше сценариев, таких как получение данных от API. Вы можете прочитать об этом в [нашей дорожной карте](/blog/2018/11/27/react-16-roadmap.html). diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index 13a333570..ac68a55c4 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -157,7 +157,7 @@ class Clock extends React.Component { } ``` -Классовые компоненты всегда должны вызывать базовый конструктор с агрументом `props`. +Классовые компоненты всегда должны вызывать базовый конструктор с аргументом `props`. 3) Удалим проп `date` из элемента ``: @@ -205,7 +205,7 @@ ReactDOM.render( Первоначальный рендеринг компонента в DOM называется «монтирование» (mounting). Нам нужно [устанавливать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, когда это происходит. -Каждый раз когда DOM-узел, созданный компонентом, удаляется, просходит «размонтирование» (unmounting). Чтобы избежать утечки ресурсов, мы будем [сбрасывать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) при каждом «размонтировании». +Каждый раз когда DOM-узел, созданный компонентом, удаляется, происходит «размонтирование» (unmounting). Чтобы избежать утечки ресурсов, мы будем [сбрасывать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) при каждом «размонтировании». Объявим специальные методы, которые компонент будет вызывать при монтировании и размонтировании: