React
Компоненты более высокого порядка
Поиск…
Вступление
Компоненты более высокого порядка («HOC» вкратце) представляет собой шаблон дизайна реагирующего приложения, который используется для улучшения компонентов с использованием многоразового кода. Они позволяют добавлять функциональные возможности и поведение к существующим классам компонентов.
HOC - это чистая функция javascript, которая принимает компонент как аргумент и возвращает новый компонент с расширенной функциональностью.
замечания
HOC довольно часто используются в сторонних библиотеках. Например, функция подключения Redux.
Простой компонент более высокого порядка
Предположим, мы хотим, чтобы console.log каждый раз, когда компонент монтируется:
hocLogger.js
export default function hocLogger(Component) {
return class extends React.Component {
componentDidMount() {
console.log('Hey, we are mounted!');
}
render() {
return <Component {...this.props} />;
}
}
}
Используйте этот HOC в своем коде:
MyLoggedComponent.js
import React from "react";
import {hocLogger} from "./hocLogger";
export class MyLoggedComponent extends React.Component {
render() {
return (
<div>
This component get's logged to console on each mount.
</div>
);
}
}
// Now wrap MyLoggedComponent with the hocLogger function
export default hocLogger(MyLoggedComponent);
Компонент более высокого порядка, который проверяет подлинность
Допустим, у нас есть компонент, который должен отображаться только в том случае, если пользователь вошел в систему.
Поэтому мы создаем HOC, который проверяет подлинность для каждого render ():
AuthenticatedComponent.js
import React from "react";
export function requireAuthentication(Component) {
return class AuthenticatedComponent extends React.Component {
/**
* Check if the user is authenticated, this.props.isAuthenticated
* has to be set from your application logic (or use react-redux to retrieve it from global state).
*/
isAuthenticated() {
return this.props.isAuthenticated;
}
/**
* Render
*/
render() {
const loginErrorMessage = (
<div>
Please <a href="/login">login</a> in order to view this part of the application.
</div>
);
return (
<div>
{ this.isAuthenticated === true ? <Component {...this.props} /> : loginErrorMessage }
</div>
);
}
};
}
export default requireAuthentication;
Затем мы просто используем этот компонент более высокого порядка в наших компонентах, которые должны быть скрыты от анонимных пользователей:
MyPrivateComponent.js
import React from "react";
import {requireAuthentication} from "./AuthenticatedComponent";
export class MyPrivateComponent extends React.Component {
/**
* Render
*/
render() {
return (
<div>
My secret search, that is only viewable by authenticated users.
</div>
);
}
}
// Now wrap MyPrivateComponent with the requireAuthentication function
export default requireAuthentication(MyPrivateComponent);
Этот пример более подробно описан здесь .