Перевод: Лю Сяоси
Оригинальная ссылка:Рисовое путешествие avlutin.com/7-architect…
длина оригиналаОченьОно длинное, но содержание слишком привлекательно для меня, поэтому я не могу не перевести его. Эта статья очень полезна для написания повторно используемых и поддерживаемых компонентов React. Но поскольку длина слишком велика, я разделил статью, эта статья посвященакомпозиция и мультиплексирование. Из-за ограниченного уровня некоторые переводы в тексте могут быть недостаточно точными, если у вас есть идеи получше, укажите их в комментариях.
Другие статьи можно нажать: GitHub.com/Иветт Л.А. Ю/Б…
——————————————— Я — разделительная линия ————————————————
комбинация
Составной компонент состоит из более мелких конкретных компонентов.
Композиция — это способ создания более крупных компонентов путем их объединения. Композиция лежит в основе React.
К счастью, композиция проста для понимания. Объедините группу маленьких частей, чтобы создать большую.
Давайте рассмотрим распространенный шаблон композиции интерфейсного приложения. применяется руководителемheader,Нижнийfooter, осталосьsidebar, а действительное содержимое в середине объединяется:
<div id="root"></div>
function Application({ children }) {
return (
<div className="application box">
<Label>Application</Label>
{children}
</div>
);
}
function Header() {
return (
<div className="header box">
<Label>Header</Label>
</div>
)
}
function Footer() {
return (
<div className="header box">
<Label>Footer</Label>
</div>
)
}
function Sidebar({ children }) {
return (
<div className="sidebar box">
<Label>Sidebar</Label>
{children}
</div>
);
}
function Content({ children }) {
return (
<div className="content box">
<Label>Content</Label>
{children}
</div>
)
}
function Menu() {
return (
<div className="menu box">
<Label>Menu</Label>
<div className="description">
<div className="text shorter" />
<div className="text" />
<div className="text shorter" />
<div className="text shorter" />
</div>
</div>
);
}
function Article() {
return (
<div className="article box">
<Label>Article</Label>
<div className="description">
<div className="text shorter" /> <div className="text longer" />
<div className="text shorter" /> <div className="text" />
<div className="text shorter" /> <div className="text" />
<div className="text" /> <div className="text shorter" />
<div className="text shorter" /> <div className="text" />
<div className="text" /> <div className="text shorter" />
<div className="text shorter" /> <div className="text longer" />
<div className="text shorter" /> <div className="longer" />
<div className="text shorter" /> <div className="text" />
<div className="text" /> <div className="text shorter" />
<div className="text shorter" /> <div className="text" />
</div>
</div>
);
}
function Label({ children }) {
return <div className="label"><{children}></div>
}
const app = (
<Application>
<Header />
<Sidebar>
<Menu />
</Sidebar>
<Content>
<Article />
</Content>
<Footer />
</Application>
);
ReactDOM.render(app, document.getElementById('root'));
Приложения демонстрируют, как композиция создает приложения. Эта организация организует код таким образом, чтобы он был одновременно выразительным и простым для понимания.
Объединение компонентов React происходит естественным образом. Эта библиотека использует декларативную парадигму, чтобы не подавлять выразительность композиции.
<Application>Зависит от<Header>,<Sidebar> <Content>а также<Footer>сочинение.<Sidebar>есть один<Menu>компоненты,<Content>есть один<Article>компонент.
Итак, какое отношение композиция имеет к одиночной ответственности и инкапсуляции? Давайте посмотрим вместе:
принцип единой ответственностиописывает, как разделить требования на компоненты,упаковкаописывает, как организовать эти компоненты, а композиция описывает, как склеить всю систему вместе.
Преимущества комбинации
единственная ответственность
Важным аспектом композиции является возможность составлять сложные компоненты из конкретных мелких компонентов. Этот подход «разделяй и властвуй» помогает сложным компонентам, которые объединяются в соответствии с принципами SRP.
Возвращаясь к предыдущему фрагменту кода,<Application>ответственный за оказаниеheader,footer,sidebarи основной район.
Имеет смысл разделить эту ответственность на четыре подобязанности, каждая из которых реализуется отдельным компонентом, а именно<header>,<sidebar>,<content>а также<footer>. Затем эти компоненты склеиваются.<Application>.
Теперь давайте взглянем на преимущества композиции: реализуя единую ответственность через подкомпоненты, делая<Application>Компоненты также соответствуют принципу единой ответственности.
многоразовый
Преимущество композиции в том, что ее можно использовать повторно, компоненты, использующие композицию, могут повторно использовать общую логику.
Например, компоненты<Composed1>а также<Composed2>Есть общий код:
const instance1 = (
<Composed1>
/* Specific to Composed1 code... */
/* Common code... */
</Composed1>
);
const instance2 = (
<Composed2>
/* Common code... */
/* Specific to Composed2 code... */
</Composed2>
);
Дублирование кода является плохой практикой (например, изменениеComposed1код, вам также нужно изменитьComposed2код внутри), так как мне сделать так, чтобы компоненты повторно использовали общий код?
Во-первых, упакуйте общий код в новый компонент, например<Common>, тогда
Во-первых, инкапсулируйте общий код в новый компонент. Второй,<Composed1>а также<Composed2>следует использовать в сочетании, чтобы содержать<Common>компонентов, чтобы избежать дублирования кода, следующим образом:
const instance1 = (
<Composed1>
<Piece1 />
<Common />
</Composed1>
);
const instance2 = (
<Composed2>
<Common />
<Piece2 />
</Composed2>
);
Многоразовые компоненты не повторяются (Don't repeat yourself)правила. Эта практика экономит энергию и время, а на более поздних этапах полезна для обслуживания кода.
гибкий
существуетreact, составной компонент передается дочерним компонентамpropsспособ управления его дочерними компонентами. Это дает преимущество гибкости.
Например, есть компонент, которому нужно отображать информацию в соответствии с устройством пользователя, используя композицию, можно гибко выполнить это требование:
function ByDevice({ children: { mobile, other } }) {
return Utils.isMobile() ? mobile : other;
}
<ByDevice>{{
mobile: <div>Mobile detected!</div>,
other: <div>Not a mobile device</div>
}}</ByDevice>
<ByDevice>Составной компонент для мобильных устройств показывает:Mobile detected!; для немобильных устройств отображатьNot a mobile device".
эффективный
Пользовательские интерфейсы представляют собой компонуемые иерархии, поэтому композиция компонентов является эффективным способом создания пользовательских интерфейсов.
Примечание:DRYТеоретически с этим принципом проблем нет, но в практическом применении не рекомендуется менять догму. Он может играть только руководящую роль, и количественного эталона нет.В противном случае теоретически каждая строка кода в программе может появиться только один раз, что очень абсурдно.То же самое верно и для других принципов,которые играют лишь руководящую роль. роль.
мультиплекс
Компоненты многократного использования, напишите один раз и используйте много раз.
Представьте, если бы разработка программного обеспечения всегда изобретала велосипед. Затем, когда вы пишете код, вы не можете использовать какие-либо существующие библиотеки или инструменты. Вы даже не можете использовать уже написанный код в одном приложении. Можно ли в такой среде написать приложение за разумное время? Невозможный.
На этом этапе вы должны осознать важность повторного использования, использовать существующие библиотеки или код, а не изобретать велосипед.
Повторное использование в приложении
Согласно "Не повторяйся" (DRY) каждая часть знания должна иметь единственное, недвусмысленное, авторитетное представление в системе. Этот принцип рекомендует избегать повторений.
Дублирование кода усложняет и увеличивает обслуживание, не добавляя существенной ценности. Обновления логики заставляют вас изменять весь повторяющийся код в вашем приложении.
Проблемы дублирования могут быть решены с помощью повторно используемых компонентов. Напишите один раз, используйте много раз.
Однако повторное использование не обходится без затрат. Только один компонент можно использовать повторно, если он соответствует принципу единой ответственности и имеет разумную инкапсуляцию.
Соблюдение принципа единой ответственности является обязательным:
Повторное использование компонента на самом деле означает повторное использование его обязанностей.
Компоненты, несущие только одну ответственность, проще всего использовать повторно.
Однако, когда компонент по ошибке имеет несколько обязанностей, его повторное использование добавляет много накладных расходов. Вы хотите повторно использовать только одну реализацию ответственности, но также получаете ненужные реализации ответственности. Например, вы просто хотите банан, но в то же время вы получаете банан, вы должны принять все джунгли.
Разумно упакованные компоненты. Внутренняя реализация скрыта, и есть явнаяprops, чтобы компонент можно было использовать в различных случаях, когда необходимо повторное использование.
Повторное использование сторонних библиотек
В будний день вы только что получили заявку на добавление новых функций для задачи, до того, как рукава подняли MAD CONDED код, мы будем ждать несколько минут.
Работа, которую вы должны сделать, имеет высокую вероятность быть решенной. из-заReactОн настолько популярен и у него большое сообщество открытого исходного кода, что разумно сначала выполнить поиск, чтобы увидеть, существует ли существующее решение.
Проверитьbrillout/awesome-react-components, в котором есть список повторно используемых компонентов.
Хорошие сторонние библиотеки оказывают структурное влияние и продвигают лучшие практики. По моему опыту, наиболее влиятельнымreact-routerа такжеredux.
react-routerИспользуйте декларативный маршрут для создания одностраничного приложения. использовать<Route>БудуURLсвязанные с компонентом. когда пользователь получает доступ к соответствиюURL, маршрут отобразит соответствующий компонент.
reduxа такжеreact-reduxПредставлено одностороннее и предсказуемое управление состоянием приложения. Асинхронный и нечистый код (например,HTTPзапросы) извлекаются из компонентов, тем самым соблюдается принцип единой ответственности и создаются чистые или почти чистые компоненты.
Вот контрольный список, чтобы определить, стоит ли использовать стороннюю библиотеку:
- Документация: проверьте, есть ли в библиотеке осмысленные
README.mdДокументация и подробная документация - Протестировано: Отличительной чертой надежной библиотеки является высокий охват тестами.
- Обслуживание: посмотрите, как часто авторы библиотек создают новые функции, исправляют ошибки и регулярно поддерживают
Наконец, спасибо за вашу готовность потратить свое драгоценное время на чтение этой статьи. Если эта статья дала вам небольшую помощь или вдохновение, пожалуйста, не скупитесь на лайки и звезды. двигаться вперед.GitHub.com/Иветт Л.А. Ю/Б…