Для большинства юных пользователей React, как и когда разделять элемент React, является сложным вопросом. В обозримом будущем основная группа разработчиков React хочет полностью «функционализировать» структуру компонентов (см. Https://reactjs.org/docs/hooks-state.html). С помощью библиотеки конечных автоматов (например, Redux, Apollo Client…) мы можем вернуть React к его исходному предназначению - библиотеке уровня представления.
В структуре MVC React определен для обработки рендеринга на уровне представления, получения реквизитов от своего родительского или конечного автомата, рендеринга представления на основе заданных данных. Функция состояния - это синтаксический сахар для разработки контроллера состояния области действия компонента. Redux connect и Apollo Client's Query Component предоставили хорошие способы управления состоянием области видимости с помощью удобочитаемого синтаксиса.
С помощью этих инструментов вы должны писать как можно больше компонентов без состояния. Только компонент-оболочка страницы или раздела использует метод жизненного цикла PureComponent для взаимодействия с серверным API (в Apollo Client вы можете использовать только компонент Query and Mutation для его обработки). Компонент оболочки просто отображает только другой компонент «средства просмотра», он может включать в себя оператор if или переключать случаи для определения того, какой компонент должен быть визуализирован. Уменьшение количества определяющего оператора может улучшить возможность повторного использования и упростить структуру корня в компонентах средства просмотра. Во многих случаях контекст является лучшим шаблоном для передачи данных компонента оболочки.
Безусловно, разделение уровня контроллера и компонента представления по-прежнему является хорошим решением в последних интерфейсных разработках, даже если структура MVC предложена более 50 лет назад.
