Заметки Андрея Романова

Реакт очень популярен. Из-за этого многие новички используют его неправильно, не понимая, какую задачу он решает.

Основные задачи, которые нужно решить при разработке веб-приложения:
— управление состоянием приложения;
— общение с сервером;
— роутинг (изменение урла при переходах между страницами);
— разработка интерфейса. ← за это отвечает Реакт

Как видите, Реакт отвечает только за построение интерфейса. Реакт не отвечает за программирование бизнес-логики. Реакт не отвечает за роутинг. Реакт не отвечает за общение с сервером. Из всего этого вытекает несколько простых правил.

Не пишите бизнес-логику в Реакт-компонентах. Логика приложения должна быть скрыта в отдельном модуле, который предоставляет наружу простой и декларативный API, которым можно пользоваться даже через консоль, без UI.

Не используйте Реакт для роутинга. React Router это очень популярная библиотека с нескольким десятком тысяч звёзд на Гитхабе, но серьёзно, она провоцирует разработчиков творить ужасные вещи. Она заставит вас нарушить предыдущий пункт и писать бизнес-логику в компонентах. Она заставит вас относиться к URL как к ещё одному источнику состояния приложения. Она заставит вас смешать вёрстку и настройки роутера (а в четвёртой версии появляется возможность раскидать настройки роутера вообще по всему приложению). Роутинг быть скрыт в отдельном модуле. URL должен зависеть от состояния приложения, а не наоборот. Это значит, что URL должен меняться автоматически при изменении состояния приложения. Обращаться к URL для чтения каких-то данных нельзя вообще никогда, кроме момента инициализации приложения (в момент инициализации можно использовать данные из URL для задания исходного состояния приложения).

Не используйте Реакт для общения с сервером. Серьёзно, есть компоненты вроде <Fetch url='...' /> — пожалуйста, не делайте так. За общение с сервером должен отвечать отдельный модуль, скрывающий детали реализации и предоставляющий абстрактный API вроде articles.get({ id: 1 }).then((article) => {}).

www.tgoop.com/andrew_r_notes/82

4.1K viewsFeb 6, 2018 at 15:33

Реакт очень популярен. Из-за этого многие новички используют его неправильно, не понимая, какую задачу он решает.

Основные задачи, которые нужно решить при разработке веб-приложения:
— управление состоянием приложения;
— общение с сервером;
— роутинг (изменение урла при переходах между страницами);
— разработка интерфейса. ← за это отвечает Реакт

Как видите, Реакт отвечает только за построение интерфейса. Реакт не отвечает за программирование бизнес-логики. Реакт не отвечает за роутинг. Реакт не отвечает за общение с сервером. Из всего этого вытекает несколько простых правил.

Не пишите бизнес-логику в Реакт-компонентах. Логика приложения должна быть скрыта в отдельном модуле, который предоставляет наружу простой и декларативный API, которым можно пользоваться даже через консоль, без UI.

Не используйте Реакт для роутинга. React Router это очень популярная библиотека с нескольким десятком тысяч звёзд на Гитхабе, но серьёзно, она провоцирует разработчиков творить ужасные вещи. Она заставит вас нарушить предыдущий пункт и писать бизнес-логику в компонентах. Она заставит вас относиться к URL как к ещё одному источнику состояния приложения. Она заставит вас смешать вёрстку и настройки роутера (а в четвёртой версии появляется возможность раскидать настройки роутера вообще по всему приложению). Роутинг быть скрыт в отдельном модуле. URL должен зависеть от состояния приложения, а не наоборот. Это значит, что URL должен меняться автоматически при изменении состояния приложения. Обращаться к URL для чтения каких-то данных нельзя вообще никогда, кроме момента инициализации приложения (в момент инициализации можно использовать данные из URL для задания исходного состояния приложения).

Не используйте Реакт для общения с сервером. Серьёзно, есть компоненты вроде <Fetch url='...' /> — пожалуйста, не делайте так. За общение с сервером должен отвечать отдельный модуль, скрывающий детали реализации и предоставляющий абстрактный API вроде articles.get({ id: 1 }).then((article) => {}).

BY Заметки Андрея Романова