Компоненты высшего порядка в 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.

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