Лучшие практики React.js в 2016 году

27.01.2016

2015 год поистине можно назвать годом React.js, так много событий было связано с этим фреймворком. Но что нас ждет в 2016 году, как мы будем разрабатывать приложения на React и какие библиотеки будем использовать? На этот вопрос ответил Питер Мартон в блоге компании RisingStack.

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

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

Если вам кажется, что ваше приложение нуждается во Flux, можете вглянуть на Redux и отличную статью Дэна Абрамова. Redux развивает идеи Flux, но избегает излишней сложности.

Если вам не нравятся такие решения, как Flux/Redux или хотите чего-то более реактивного, не расстраивайтесь! Питер предлагает список библиотек, на которые вы можете взглянуть:

Многим не нравится JSX. Во-первых, JSX не является обязательным в React. В итоге он компилируется в JavaScript c помощью Babel, вы можете сразу писать JavaScript. Но работать с JSX гораздо удобнее, а модифицировать шаблон сможет человек, даже не знакомый с React.

Подробнее о JSX вы можете прочитать в статье JSX Looks Like An Abomination — But it’s Good for You.

React прекрасно работает с классами ES6.


class HelloMessage extends React.Component {  
    render() {
        return 
Hello {this.props.name}
} }

Также Питер Мартон рекомендует валидировать свойства компонентов с помощью propTypes. Это поможет сэкономить вам кучу времени.


MyComponent.propTypes = {  
    isLoading: PropTypes.bool.isRequired,
    items: ImmutablePropTypes.listOf(
        ImmutablePropTypes.contains({
            name: PropTypes.string.isRequired,
        })
    ).isRequired
}

Да, и Immutable.js свойства тоже можно валидировать с помощью react-immutable-proptypes.

В ES6 классах компонентов миксины больше не поддерживаются, поэтому необходимо искать новые решения. Питер предлагает взглянуть в сторону компонентов высшего порядка:


PassData({ foo: 'bar' })(MyComponent)

С их помощью, вы по сути, просто составляете новый компонент из оригинального и расширяете его поведение. Использовать компоненты высшего порядка можно в различных ситуациях, например, для авторизации: requireAuth({ role: ’admin’ })(MyComponent) (компонент высшего порядка проверяет, авторизован ли пользователь, и редиректит, если не авторизован).

Сообщество React.js, как и сообщество фронтед-разработки в целом, стремительно развивается. Поэтому стоит следить не только за React.js, но и за другими фреймворками и библиотеками, чтобы выбирать лучшие практики и решения для своих проектов.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться