Эта статья подходит для студентов, которые хотят понять React High-Order Component и не знакомы с функциональным программированием. Она не подходит для студентов, которые знакомы с компонентами High-Order и функциональным программированием. Цель этой статьи — помочь учащимся, не имеющим опыта функционального программирования, понять высокоуровневые компоненты и получить представление о возможностях высокоуровневых компонентов.Я надеюсь, что вы сможете использовать высокоуровневые компоненты в своих проектах.
Ладно, ерунда закончилась, переходим к делу. Прежде чем говорить о том, что такое компонент более высокого порядка, давайте посмотрим, что такое компонент React:
const Person = props => <div>{props.name}</div>
Здесь компонент Person получает PROPS для возврата в React Element, который используется для вызова этого компонента для функционального компонента.Но вы можете думать о Person как о функции, которая получает реквизиты в качестве параметров и возвращает React Element.
Давайте посмотрим, что такое компонент более высокого порядка:
const identity = func => func
Тождество здесь принимает функцию, а затем возвращает функцию как есть Я сказал, что тождество является функцией высшего порядка, у вас не должно быть сомнений, верно? Да, тождество — это простая функция высшего порядка.Если мы понимаем компоненты как функции, компоненты более высокого порядка можно понимать как функции более высокого порядка. Функция высшего порядка принимает функцию в качестве параметра функции и возвращает функцию; компонент высшего порядка принимает компонент в качестве параметра функции и возвращает компонент.Теперь изменим форму идентификации:
const identity = BaseComponent => BaseComponent
Идентичность здесь — это простой компонент более высокого порядка, который берет компонент и возвращает его как есть. Проще говоря, я думаю, что компоненты более высокого порядка и функции более высокого порядка, по сути, одно и то же. Студенты, знакомые с ramdajs, должны быть знакомы с функцией идентификации, но наша идентификация здесь не очень полезна в качестве высокоуровневого компонента.
Некоторые студенты могут спросить, это этот компонент высокого уровня? Что такое использование? Давайте посмотрим на практический пример ниже:
const List = ({ data }) => (
<ul>
{data.map(item => <li key={item.name}>{item.name}</li>)}
</ul>
)
У нас есть такой компонент списка, если мы хотим добавить функцию загрузки в этот компонент списка, мы можем сделать это следующим образом:
const List = ({ data, isLoading }) => (
isLoading ?
<div>我正在加载...</div> :
<ul>
{data.map(item => <li key={item.name}>{item.name}</li>)}
</ul>
)
Давайте изменим код компонента List, чтобы он мог судить о том, происходит ли анимация загрузки в соответствии с состоянием isLoading. Это не невозможно сделать, но недостаточно элегантно. Во-первых, для этого требуется изменить код исходного компонента; во-вторых, если у нас есть другие компоненты, такие как таблица, которым также нужна функция загрузки, нам нужно повторить ту же логику суждения. Мы можем прекрасно решить две вышеупомянутые проблемы с компонентами/функциями более высокого порядка.
const withLoading = BaseComponent => ({ isLoading, ...otherProps }) => (
isLoading ?
<div>我正在加载...</div> :
<BaseComponent {...otherProps} />
)
const LoadingList = withLoading(List)
Наш withLoading здесь принимает BaseComponent и возвращает расширенный компонент (LoadingList).Мы обрабатываем логику оценки загрузки внутри LoadingList, чтобы мы могли повторно использовать логику оценки загрузки без изменения кода List. В дальнейшем, если будут компоненты, которым нужна функция загрузки, я могу это сделать вызовом withLoading, а можно вызвать в виде декоратора (@withLoading).
@withLoading
class Table extends React.Component {
//...
}
Использование withLoading очень похоже на использование withRouter в react-router, верно, withRouter — это высокоуровневый компонент, который вводит некоторые данные, связанные с маршрутизацией, во входящий компонент.
Давайте посмотрим на другой пример:
const flattern = propKey => BaseComponent => props => <BaseComponent {...props} {...props[propKey]} />
Наша функция Flatten приняла пропасть и вернула компонент с высоким порядком. Его роль состоит в том, чтобы сгладить ключ в реквизитах (форма немного похожа на сочетание в redux) в redux. Что такое выгода?
const FlatternLoadingList = flattern('list')(LoadingList)
...
// 我们就可以这样调用组件
<FlatternLoadingList list={...}/>
// 而不用像下面这样一个个手动传递 props
<LoadingList data={...} isLoading={...}/>
Предположим, мы перечисляем компоненты внутри параметров маршрутизатора, которые необходимо прочитать, весь процесс вызова становится таким:
const LoadingList = withLoading(List)
const FlatternLoadingList = flattern('list')(LoadingList)
const EnhancedList = withRouter(FlatternLoadingList)
// 或者是下面这样， 难以阅读
const EnhancedList2 = withRouter(flattern('list')(withLoading(List)))
Если нам потребуется вызывать все больше и больше высокоуровневых компонентов, процесс вызова станет громоздким и трудным для чтения.compose. Применение компоновки в функциональном программировании очень распространено, и функция компоновки также предоставляется в редукции. Для более подробного ознакомления с композицией см.здесь. использовать compose пишем так:
const EnhancedList = compose(
withRouter,
flattern('list'),
withLoading,
)(List)
Это очень лаконично? Мы также можем использоватьpipeфункция, которая похожа на функцию составления, за исключением того, что ее порядок композиции — слева направо, а компоновка — справа налево.
Компоненты высшего порядка в этом паттерне были впервыеgistКак упоминалось выше, сейчас в сообществе React можно увидеть большое количество компонентов более высокого порядка и тень функционального программирования. Некоторые расширенные вопросы использования и производительности высокоуровневых компонентов здесь не обсуждаются, и заинтересованные студенты могут найти другую информацию самостоятельно.
Наконец, я надеюсь, что эта статья будет вам полезна, и я предлагаю вам систематически изучать функциональное программирование. Поначалу функциональное программирование может показаться странным и трудным для понимания, но придерживайтесь его, и вам понравится, ха-ха!
Ссылка на ссылку
Higher-Order Components - React
medium.com/@indignant оборванный…