Слишком много статей о том, как писать повторно используемые компоненты React. Почему бы нам не попробовать что-нибудь другое? В то время как повторно используемые и чистые компоненты могут ускорить разработку в команде, такой гениальный разработчик, как вы, может делать все в одиночку и сделать код понятным только для вас. Да, ты можешь сделать это!
Если вышеперечисленное недостаточно для вас или вы даже согласны с этим, то эта статья для ВАС! Ознакомьтесь с 4 простыми шагами по написанию неиспользуемых компонентов ниже:
1. Сделайте это огромным
Не делайте это большим, сделайте это ОГРОМНЫМ! Было бы лучше, если бы вы могли написать все приложение в одном компоненте, тогда не было бы необходимости повторно использовать его.
Большие компоненты нельзя использовать повторно, потому что они сложны и специфичны. Чтобы компонент можно было использовать повторно, он должен быть общим, а не конкретным, чтобы соответствовать другим частям кода. Компоненты меньшего размера легче написать в общих чертах, чем большие, поскольку они обычно проще и несут меньше логики.
Если вы когда-нибудь задумывались, насколько маленькими могут быть компоненты, посмотрите свои любимые библиотеки компонентов или Material-UI. Строительными блоками отличных веб-приложений являются компоненты размером с кнопку. Они отражают узор, который постоянно повторяется в дизайне. Найти их и превратить в компоненты, готовые к повторному использованию, - это то, что хотят делать другие разработчики, но не вы! Вы любите нарушать принцип СУХОЙ и гордитесь этим!
Избегайте любой ценой разбивать огромные компоненты на мелкие части!
2. Добавьте к этому (много) бизнес-логики
Что лучше большого компонента? Большой компонент с большим количеством бизнес-логики (и переплетенный, как спагетти)! Чистые кодеры любят, чтобы все было маленьким, настолько маленьким, что они делают только одно. Презентация - это одно, а бизнес-логика - тоже одно. Хотя бизнес-логика может показаться слишком расплывчатой, давайте рассмотрим различные состояния и вызовы API в вашем гигантском компоненте.
Разработчики, стремящиеся написать повторно используемый код, будут отделять презентационные компоненты от тех, единственная цель которых - хранить данные и манипулировать ими. Они считают, что кнопку с возможностью принимать логику от своих родителей или оболочек можно использовать в большем количестве мест, чем кнопка, созданная только для вызова API, который вы жестко запрограммировали. В некотором смысле они могут быть правильными, но вы знаете от всего сердца, что возможность многократного использования делает разработку проще и, следовательно, менее сложной для вас!
Всегда наполняйте компоненты множеством состояний, вызовами API, логикой манипулирования данными, всем, что вы можете придумать!
3. Дайте ему загадочное имя
Вы когда-нибудь изучали имя переменной, не понимая, что это такое? Это чувство, которое я хочу, чтобы вы запомнили и воспроизвели в своем коде! В то время как другие разработчики очень усердно работают над тем, чтобы дать имя, которое было бы одновременно описательным и кратким, вам просто все равно! Вы знаете, что «Данные» - лучшее имя для любой переменной, и ничто не звучит лучше, чем «Контент» в качестве имени компонента.
Магическое имя может заставить других разработчиков держаться подальше от повторно используемого компонента. Независимо от того, насколько хорошо написана реализация, если название предполагает, что она написана кем-то, кого не заботит общение, ни один предприимчивый разработчик не захочет трогать ее и тем более использовать.
Так что пусть имена будут понятны только вам, а вашей команде предстоит решить головоломку!
4. Спрячьте это где-нибудь в коде.
Это тот шаг, на который вы не хотите идти. Если, к сожалению, у вас ничего не вышло, то последний шаг - спрятать это где-нибудь глубоко в коде. Вы можете сохранить презентационный компонент в файл для сохранения хуков или интерфейсов. Вы можете создать для него отдельный файл, но поместить его в какое-нибудь несущественное место, так как вы помещаете StyledButton.jsx в папку, сохраняющую срезы redux. Просто оставьте это грязным!
Компонент может быть повторно использован сам по себе, но его трудно обнаружить, и поэтому маленькие разработчики осознают его существование. На самом деле, два разработчика нередко создают один и тот же компонент с одной и той же функцией, о которой никто не знает. Если вы хотите предотвратить повторное использование кода, вам действительно следует постараться скрыть созданные вами компоненты.
Однако современные текстовые редакторы могут быть вашими врагами. Они позволяют другим разработчикам отслеживать местоположение вашего компонента одним щелчком мыши. Но не беспокойтесь, большинство разработчиков слишком заняты, чтобы реорганизовать ваш код. Они оставят это там и дадут гнить.
Есть много способов сделать компонент непригодным для повторного использования. Они дружелюбны к новичкам, и их несложно освоить. Смысл написания компонента, который нельзя использовать повторно, заключается в том, чтобы не заботиться о других. Просто будь собой! Пишите код, который понимаете только вы и будете использовать только вы!
P.S: Применяйте четыре шага на свой страх и риск ...
