Компоненты высшего порядка в React

В этой статье мы рассмотрим компоненты высшего порядка (Higher-Order Components, HOC) в React.

Что такое HOC?

HOC — это особая техника в React, при которой функция принимает аргумент Component и возвращает новый компонент.

function composeComponent(Component) {
    return class extends React.Component {
        render() {
            return <Component />
        }
    }

}

В данном примере функция composeComponent принимает аргумент Component и возвращает компонент ES6 class. Возвращенный класс отображает аргумент Component. Аргумент Component является компонентом React, который будет отображаться возвращенным компонентом class.

Например:

class CatComponent {
    render() {
        return <div>Cat Component</div>
    }
}

CatComponent отображает следующее:

Cat Component

CatComponet может быть передан функции composeComponent для получения другого компонента:

const composedCatComponent = composeComponent(CatComponent)

composedCatComponent может быть отображен:

<composedCatComponent />

Результат выглядит следующим образом:

Cat Component

Та же функция высшего порядка, как и в JS.

Функция высшего порядка

Функция высшего порядка — это шаблон в JS, при котором одна функция принимает другую функцию и возвращает функцию в качестве результата, что является возможным благодаря композиционному характеру JS. Это означает, что:

объекты
массивы
строки
числа
логические значения
функции

могут быть переданы функциям в качестве аргументов или возвращены из функции.

function mul(x) {
    return (y) => {
        return x * y
    }
}
const mulTwo = mul(2)

mulTwo(2) // 4
mulTwo(3) // 9
mulTwo(4) // 8
mulTwo(5) // 10

Функция mul возвращает функцию, которая захватывает x в замыкании. x теперь доступен для возвращенной функции, а mul является теперь функцией высшего порядка, поскольку она возвращает функцию. Это означает, что ее можно использовать для создания более специфических функций с использованием различных аргументов.

Например, ее можно использовать для создания функции, которая утраивает свои аргументы:

function mul(x) {
    return (y) => {
        return x * y
    }
}
const triple = mul(3)

triple(2) // 6
triple(3) // 9
triple(4) // 12
triple(5) // 15

В чем преимущества элементов высшего порядка? При постоянном повторении логики нужно найти способ разместить логику в одном месте и использовать ее оттуда. Функции высшего порядка предоставляют шаблон, который можно использовать для этой реализации.

В приведенном выше примере при непрерывном умножении на 3 в приложении можно создать функцию, которая возвращает функцию, умножающую на 3 triple. Поэтому при необходимости написать код multiplication by 3, нужно просто вызвать triple, передающий число для умножения на 3 в качестве параметра.

Общие проблемы при работе с HOC

В чем преимущества использования HOC в приложении React?

В процессе написания программы одна и та же логика может повторяться снова и снова.

Например, приложение для просмотра и редактирования документов. Приложение будет аутентифицировано, поэтому только аутентифицированные пользователи смогут получить доступ к панели инструментов, редактировать, просматривать или удалять документы. Маршруты будут выглядеть следующим образом:

<Route path="/" component={App}>
    <Route path="/dashboard" component={Documents}/>
    <Route path="document/:id/view" component={ViewDocument} />
    <Route path="documents/:id/delete" component={DelDocument} />
    <Route path="documents/:id/edit" component={EditDocument}/>
</Route>

Документы нужно аутентифицировать, чтобы только аутентифицированные пользователи могли получить к ним доступ. Для этого необходимо сделать следующее:

class Doucments extends React.Component {
    componentwillMount() {
        if(!this.props.isAuth){
            this.context.router.push("/")
        }
    }
    componentWillUpdate(nextProps) {
        if(!nextProps.isAuth) {
            this.context.router.push("/")            
        }
    }
    render() {
        return <div>Documents Paegs!!!</div>
    }
}

function mapstateToProps(state) {
    isAuth: state.auth
}
export default connect(mapStateToProps)(Documents)

State.auth содержит состояние пользователя. Если пользователь не аутентифицирован, то значение будет false, в обратно случае — true. Функция connect отобразит состояние для объектов props isAuth. Затем при подключении компонента к DOM запускается componentWillMount. Здесь нужно проверить, обладает ли prop isAuth значением true. При значении true метод передается вниз, а при значении false метод передает маршрут “/” индексной страницы маршрутизатору. В результате браузер загружает страницу индекса внутри рендеринга компонента documents, запрещая не аутентифицированным пользователям получить доступ.

Когда компонент выполняет ре-рендеринг после первоначального рендеринга, необходимо выполнить те же действия в componentWillUpdate, чтобы проверить, авторизован ли пользователь. Если нет, загружается страница индекса.

Теперь сделаем то же самое в ViewDocument:

class ViewDoucment extends React.Component {
    componentwillMount() {
        if(!this.props.isAuth){
            this.context.router.push("/")
        }
    }
    componentWillUpdate(nextProps) {
        if(!nextProps.isAuth) {
            this.context.router.push("/")            
        }
    }
    render() {
        return <div>View Document Page!!!</div>
    }
}

function mapstateToProps(state) {
    isAuth: state.auth
}
export default connect(mapStateToProps)(ViewDocument)

И в EditDocument:

class EditDocument extends React.Component {
    componentwillMount() {
        if(!this.props.isAuth){
            this.context.router.push("/")
        }
    }
    componentWillUpdate(nextProps) {
        if(!nextProps.isAuth) {
            this.context.router.push("/")            
        }
    }
    render() {
        return <div>Edit Document Page!!!</div>
    }
}

function mapstateToProps(state) {
    isAuth: state.auth
}
export default connect(mapStateToProps)(EditDocument)

Также в DelDocument:

class DelDocument extends React.Component {
    componentwillMount() {
        if(!this.props.isAuth){
            this.context.router.push("/")
        }
    }
    componentWillUpdate(nextProps) {
        if(!nextProps.isAuth) {
            this.context.router.push("/")            
        }
    }
    render() {
        return <div>Delete Document Page!!!</div>
    }
}

function mapstateToProps(state) {
    isAuth: state.auth
}
export default connect(mapStateToProps)(DelDocument)

Страницы выполняют различные действия, однако реализация одинакова.

Каждый компонент:

подключается к состоянию с помощью соединения react-redux;
отображает состояние auth для свойств props isAuth;
проверяет аутентификацию в componentWillMount;
проверяет аутентификацию в componentWillUpdate.

Представьте, что в проекте появится больше компонентов, в каждом из которых нужно выполнить те же действия. Это займет много времени.

Поэтому нужно найти способ для определения логики в одном месте. Лучше всего использовать HOC.

Для этого перемещаем всю логику в функцию, которая будет возвращать компонент:

function requireAuthentication(composedComponent) {
    class Authentication extends React.Component {
        componentwillMount() {
            if(!this.props.isAuth){
                this.context.router.push("/")
            }
        }
        componentWillUpdate(nextProps) {
            if(!nextProps.isAuth) {
                this.context.router.push("/")            
            }
        }
        render() {
            <ComposedComponent />
        }
    }
    function mapstateToProps(state) {
        isAuth: state.auth
    }
    return connect(mapStateToProps)(Authentication)
}

Все реализации находятся внутри компонента Authentication. Функция requireAuthentication соединяет компонент Authentication с хранилищем и возвращает его. Затем Authentication отображает компонент, переданный через аргумент ComposedCompoennt.

Маршруты теперь выглядят следующим образом:

<Route path="/" component={App}>
    <Route path="/dashboard" component={requireAuthentication(Documents)}/>
    <Route path="document/:id/view" component={requireAuthentication(ViewDocument)} />
    <Route path="documents/:id/delete" component={requireAuthentication(DelDocument)} />
    <Route path="documents/:id/edit" component={requireAuthentication(EditDocument)}/>
</Route>

Таким образом, независимо от количества маршрутов в приложении, нужно просто вызвать функцию requireAuthentication с переданным ей компонентом.

Заключение

Функция высшего порядка:

возвращает функцию;
используется для решения проблемы DRY.

Компонент высшего порядка:

принимает компонент в качестве аргумента;
возвращает другой компонент;
возвращенный компонент отображает оригинальный компонент;
используется для решения проблемы DRY.

Спасибо за внимание !!!

Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: Understanding Higher-Order Components in React

Поделиться статьей:

Вернуться к статьям

Компоненты высшего порядка в React

Что такое HOC?

Функция высшего порядка

Общие проблемы при работе с HOC

Заключение

Комментарии