You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature.
8
8
Компонент высшего порядка (Higher-Order Component (HOC)) -- это один из продвинутых инструментов для повторного использования логики. HOC не являются частью API React, но часто применяются из-за композиционной природы компонентов.
9
9
10
-
Говоря просто, **компонент высшего порядка -- это функция, которя принимает компонент и возвращает новый компонент.**
10
+
Говоря просто, **компонент высшего порядка -- это функция, которая принимает компонент и возвращает новый компонент.**
@@ -107,7 +107,7 @@ class BlogPost extends React.Component {
107
107
- Оба меняют локальное состояние когда меняется `DataSource`.
108
108
- Оба отписываются от `DataSource` при размонтировании.
109
109
110
-
Можете представить, что в больших приложениях связка «подписаться на `DataSource`, затем вызвать `setState`» повторяется очень часто. Было бы здорово абстрагировать эту функиональность и использовать ее в других компонентах.
110
+
Можете представить, что в больших приложениях связка «подписаться на `DataSource`, затем вызвать `setState`» повторяется очень часто. Было бы здорово абстрагировать эту функциональность и использовать ее в других компонентах.
111
111
112
112
Давайте реализуем функцию `withSubscription` -- она будет создавать компоненты и подписывать их на обновления `DataSource` (наподобие `CommentList` и `BlogPost`). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:
113
113
@@ -219,7 +219,7 @@ function logProps(WrappedComponent) {
219
219
220
220
HOC добавляют компонентам функциональность, но они не должны менять их оригинальное предназначение. Ожидается, что интерфейс компонента, который вы возвращаете из HOC, будет похож на интерфейс оборачиваемого компонента.
221
221
222
-
Пропсы, которые напрямую не связаны с функциональностью HOC, должны передаваться оборачиваемогу компоненту. Рендер метод большинства HOC похож следующий:
222
+
Пропсы, которые напрямую не связаны с функциональностью HOC, должны передаваться оборачиваемогу компоненту. Рендер метод большинства HOC похож на следующий:
*Удивлены?* Давайте разберем эту строку по частям.
266
266
267
267
```js
268
268
// Вызов функции connect возвращает другую функцию
@@ -334,13 +334,13 @@ render() {
334
334
335
335
Проблема не только в производительности. Повторное монтирование компонента обнуляет его состояние, а также состояние его дочерних компонентов.
336
336
337
-
Не применяйте HOC в определении другого компонент. Сначала нужно отдельно получить компонент из HOC, и только потом использовать его. Таким образом React будет сравнивать один и тот же компонент при повторном рендере.
337
+
Не применяйте HOC в определении другого компонента. Сначала нужно отдельно получить компонент из HOC, и только потом использовать его. Таким образом React будет сравнивать один и тот же компонент при повторном рендере.
338
338
339
339
При необходимости, в редких случаях, можно динамически применять HOC в методах жизненного цикла или в конструкторе компонента.
340
340
341
341
### Копируйте статические методы {#static-methods-must-be-copied-over}
342
342
343
-
Иногда бывает полезно определить статические методы компонента. Например, статичный метод `getFragment` библиотеки Relay позволяет составить композицию из фрагментов данныз GraphQL.
343
+
Иногда бывает полезно определить статические методы компонента. Например, статичный метод `getFragment` библиотеки Relay позволяет составить композицию из фрагментов данных GraphQL.
344
344
345
345
Когда мы применяем HOC, мы заворачиваем оригинальный компонент в контейнер. Поэтому у нового компонента не будет статичных методов оригинального компонента.
### Рефы не передаются {#refs-arent-passed-through}
394
394
395
-
По конвенции, компоненты высшего порядка и передают все пропсы оборачеваемому компоненту, кроме рефов. `ref` на самом деле не проп, как, например, `key`, и по-другому обрабатывается React. Реф элемента, созданного компонентом из HOC, будет указывать на экземпляр ближайшего в иерахрии контейнера, а не на оборачиваемый копмонент.
395
+
По конвенции, компоненты высшего порядка передают оборачеваемому компоненту все пропсы, кроме рефов. `ref` на самом деле не проп, как, например, `key`, и по-другому обрабатывается React. Реф элемента, созданного компонентом из HOC, будет указывать на экземпляр ближайшего в иерахрии контейнера, а не на оборачиваемый компонент.
396
396
397
-
<<<<<<< HEAD
398
397
Вы можете решить эту проблему с помощью `React.forwardRef` API (представлен в React 16.3). [Узнать больше в главе Пересылка рефов](/docs/forwarding-refs.html).
399
-
=======
400
-
The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
0 commit comments