Декораторы — это синтаксический паттерн, который позволяет оборачивать и модифицировать функциональность компонента чистым и читаемым способом. Хотя декораторы — это предложение второго этапа и ещё не часть ES7, они поддерживаются в React через конфигурацию Babel.
Декораторы работают, передавая компонент в функцию высшего порядка. Этот паттерн позволяет расширить поведение компонента без изменения его оригинального кода.
@setTitle('Profile')
class Profile extends React.Component {
// код компонента
}
Функция декоратора получает WrappedComponent и возвращает новый компонент с расширенной функциональностью:
const setTitle = (title) => (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
document.title = title
}
render() {
return <WrappedComponent {...this.props} />
}
}
}
@ делает декораторы визуально заметными и легко узнаваемымиДекораторы предоставляют декларативный способ расширить функциональность компонента, сохраняя при этом читаемый код. Они особенно полезны для сквозной функциональности: аутентификации, логирования или динамического управления заголовком страницы.
Декораторы в React — это финализированный стандарт ES7, и ты можешь использовать их нативно во всех современных JavaScript окружениях без каких-либо инструментов транспиляции.
Новый — ещё не проверен сообществом
Вы