Skip to content

Commit 9a4f20a

Browse files
another-guyagoldis
andauthored
Apply suggestions from code review by @another-guy
Co-Authored-By: agoldis <[email protected]>
1 parent bd4756b commit 9a4f20a

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

content/docs/higher-order-components.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,9 @@ function withSubscription(WrappedComponent, selectData) {
163163
}
164164
```
165165

166-
Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC *оборачивает* оригинальный компонент в контейнер посредством *композиции*. HOC является чистой функцией без посторонних эффектов.
166+
Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC *оборачивает* оригинальный компонент в контейнер посредством *композиции*. HOC является чистой функцией без побочных эффектов.
167167

168-
Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп `data`. Для HOC не важно как будут использоваться данные, а оборачиваемому компоненту не важно откуда они берутся.
168+
Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп `data`. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся.
169169

170170
Так как `withSubscription` -- это обычная функция, то мы можем убрать или добавить любое количество аргументов. Например, мы могли бы сделать конфигурируемым название пропа `data` и ещё больше изолировать HOC от оборачиваемого компонента. Также мы можем добавить аргумент для конфигурации `shouldComponentUpdate` или источника данных. Всё это возможно, потому что HOC полностью контролирует процесс создания компонента.
171171

@@ -189,7 +189,7 @@ function logProps(InputComponent) {
189189
const EnhancedComponent = logProps(InputComponent);
190190
```
191191

192-
В приведённом выше примере мы не можем повторно использовать `InputComponent` отдельно от `EnhancedComponent`. Важнее то, что если мы захотим обернуть `EnhancedComponent` в другой HOC, который *тоже* меняет `componentWillReceiveProps`, то мы сотрем функциональность заданную первым HOC! Более того, `EnhancedComponent` не работает с функциональными компонентами потому, что у них отсутствуют методы жизненного цикла.
192+
В приведённом выше примере мы не можем повторно использовать `InputComponent` отдельно от `EnhancedComponent`. Важнее то, что если мы захотим обернуть `EnhancedComponent` в другой HOC, который *тоже* меняет `componentWillReceiveProps`, то мы сотрём функциональность заданную первым HOC! Более того, `EnhancedComponent` не работает с функциональными компонентами, потому что у них отсутствуют методы жизненного цикла.
193193

194194
Мутирующие HOC являются хрупкой абстракцией, они конфликтуют с другими HOC, мы не сможем просто применять их без того, чтобы знать что именно они меняют.
195195

@@ -218,7 +218,7 @@ function logProps(WrappedComponent) {
218218

219219
HOC добавляют компонентам функциональность, но они не должны менять их оригинальное предназначение. Ожидается, что интерфейс компонента, который вы возвращаете из HOC, будет похож на интерфейс оборачиваемого компонента.
220220

221-
Пропсы, которые напрямую не связаны с функциональностью HOC, должны передаваться оборачиваемогу компоненту. Рендер-метод большинства HOC похож на следующий:
221+
Пропсы, которые напрямую не связаны с функциональностью HOC, должны передаваться без изменений оборачиваемогу компоненту. Рендер-метод большинства HOC похож на следующий:
222222

223223
```js
224224
render() {
@@ -238,7 +238,7 @@ render() {
238238
}
239239
```
240240

241-
Такое соглашение помогает создавать гибкие и многоразовые компоненты.
241+
Такое соглашение помогает создавать гибкие повторно используемые компоненты.
242242

243243
## Соглашение: Максимизируем композитивность {#convention-maximizing-composability}
244244

@@ -288,7 +288,7 @@ const enhance = compose(
288288
const EnhancedComponent = enhance(WrappedComponent)
289289
```
290290

291-
(Поэтому мы можем использовать `connect`, и другие расширяющие функциональность HOC, в качестве экспериментальных JavaScript декораторов.)
291+
(Поэтому мы можем использовать `connect` и другие расширяющие функциональность HOC в качестве экспериментальных JavaScript декораторов.)
292292

293293
Вы можете найти вспомогательную функцию `compose` во многих сторонних библиотеках, включая lodash (под названием [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](http://redux.js.org/docs/api/compose.html), и [Ramda](http://ramdajs.com/docs/#compose).
294294

@@ -316,7 +316,7 @@ function getDisplayName(WrappedComponent) {
316316

317317
### Не используйте HOC внутри рендер-метода {#dont-use-hocs-inside-the-render-method}
318318

319-
Алгоритм сравнения React (или согласование (reconciliation)) использует тождественность компонентов чтобы определить нужно ли обновить существующее поддерево, или убрать и монтировать вместо него новое. Если компонент, полученный из `render`, идентичен (`===`) компоненту из предыдущего рендера, то React рекурсивно продолжит сравнивать поддерево. Если компоненты не равны, React полностью удалит и заменит старое поддерево.
319+
Алгоритм сравнения React (известный как согласование или reconciliation) использует тождественность компонентов чтобы определить нужно ли обновить существующее поддерево, или убрать и монтировать вместо него новое. Если компонент, полученный из `render`, идентичен (`===`) компоненту из предыдущего рендера, то React рекурсивно продолжит сравнивать поддерево. Если компоненты не равны, React полностью удалит и заменит старое поддерево.
320320

321321
Обычно нас это не беспокоит. Однако, важно учитывать что мы не можем применять компоненты высшего порядка внутри рендер-метода компонента:
322322

0 commit comments

Comments
 (0)