Comments 6
Реакт сам - как плохой пример разделения ответственности. Создание ДОМ элементов это одна ответственность. Обновление этих элементов это вторая. Управление стейтом это третья. Это все хитроумно переплетено и от этого мы имеем все проблемы.
Создание компонента и обновление стейта объединено в одну функцию, из-за этого у нас постоянный ре-рендер, нужны хуки и рефы чтобы хоть как-то с этим справляться. Начинаются танцы с бубном с оптимизацией, мемоизацией, разбиением на фрагменты при реконсилиации, сервеный рендеринг, серверные компоненты, и вот уже компилятор, который также не решит этих проблем.
Потому что нет разделения ответственности, где человек сам смог бы выбирать когда и как создавать ДОМ, синхронно или асинхронно. Когда и как обновлять дом. Какую стратегию управления стейтом использовать в каждом конкретном компоненте. Поэтому это все и было реализовано во Фьюзоре.
export function UserProfileContainer() {
const { user, isLoading, error } = useUser();
return <UserProfileView user={user} isLoading={isLoading} error={error} />;
}Если так присмотреться, до для лучше демонстрации UserProfileView всему этому там делать нечего:
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!user) return <div>No user found</div>;Ни строки Loading... ни Error: {error.message} не являются чем-то специфическим и будут общими для любого компонента. А No user found похоже на какой-то информационный блок, который катомизируется сообщением
XD
=P
Могла бы быть обратная ситуация, когда пришёл человек, который бы сказал, что тут неправильно работаю с запросом и не обрабатываю ошибки.
Судя по неймингу тут у нас шаблон Container/Presentational. С другой стороны демонстрация SRP. Для данного шаблона это норма иметь компонент обертку, которая обращается к различным данным и расфасовывает их по презенташкам. А при предложенной в статье реализации у вас получается контейнер для разных презенташек никак не связанных друг с другом и которые можно переиспользовать с другими компонентами используется один компонент.
Поэтому вы такому собеседнику могли бы так и сказать, что у вас тут шаблон контейнер/презенташка и для каждой презенташки свой компонент в соответствии с темой статьи. И правильно это или нет - это уже не важно, главное наглядно демонстрирует тему статьи.
Очень интересно и просто объяснение принципа, лайк не иначе)
Принцип единой ответственности SOLID в React