Высокоуровневое разделение представления и логики в React

Одна из самых сильных сторон React заключается в возможности отделения представлениея от логики.  Пусть это и требует дополнительного времени, но мне нравится создавать два отдельных компонента, один скрывающий вид, другой - логику.

На первый взгляд может показаться, что это какой то оверхэд. Зачем мне создавать два файла, когда я могу просто использовать метод render. Почему нет, этот подход имеет много преимуществ. К примеру, это позволяет двум людям работать над одним кодом одновременно. Джуниор разработчик может писать стили и разметку JSX, в то время как более опытный разработчик может реализовать обработку логики. Так же еще одним рабочим решением будет разделение интересов. Весь представление можно изменять и модифицировать абстраггированно файлов с логикой, если они используют одинаковые реквизиты.

Итак, как же мы это реализуем? Просто, правда.

Во-первых, я определяю состояние. Компонент должен, например, реагировать на наведение мыши, различать его состояние между активным и бездействующим и отображать переданный ему текст. Далее я перехожу к логике. Чаще всего это класс с некоторыми внутренними методами:

import View from "@src/ui/Thing";class Thing extends React.Component {
 state = {
   active: false,
   hovered: false,
 }; setActiveState = () => this.setState({ active: !this.state.active }); 
setHoveredState = () => this.setState({ hovered: !this.state.hovered });
 render() {
   return (
     
   );
 }
}

Довольно много получилоcь кода для логики. Конечно, может быть гораздо больше, но для примера нам этого будет достаточно.

Далее займемся представлением:

const Thing = (props) => {
 const {
   active,
   hovered,
   onClick,
   onMouseEnter,
   onMouseLeave,
   text,
 } = props; return (
   

     {text}
   
 );
};

Довольно просто и лаконично.

Этот шаблон отлично работает в командах с младшими и средними разработчиками, так как они могут работать над общим проектом и младшие не будут оставаться позади из-за недостатка знаний в более сложных логических вопросах или из-за отсутствия интереса к написанию представлений.