Скорачванне колькасці React Prop-Drilling і God Components даўжынай
Выучыце сэмь конкрэтных шаблонав перафакторавання, якія дапамагаюць распадзіць вялікія компаненты React, ізольваючы стан, запошук дадзэнняў, правыя доступу і логіку завантажэння, а не проста дзелячы файлы.
Быў перыяд, калі складнасць React ацэнівалася выключна па колькасці ліній коду. Калі компонент перакracаў трыста ліній, інструментальная палітра пераводзілася ў самастоятны файл. Калі ліній стаўаўся чатырнаццатьсот, таблица таксама выделялася ў окремы файл. Файл верхньага рэвэлю становіўся меньшым, але сама функцыя не станавалася простэйшай для розумення. Родны компонент яшчэ прымалі ў сябе кожны запит да сеті, кожную модальнае вікно, розныя поля формы і ўсталяванне ўпэўнення ў якіх, перакрытчыкі на тое, што можа робіць текущы корыстнік, а таксама змяны станоў, якія перабівае экран пад час завантажэння, рэдагавання, зберагаўкі і інодзе падчас выйска.
На самай працоўкі адбывалася пераранжаванне элементаў, без жадных змян у тым, хто ўладае будынкам.
Эта разліка варта увагі, калі толькі не спыліваць з думкай, што сама велічына ёсць вораг. Компонент можа быць вялікім, якщо ён представляе адзін, цэлісны элемент інтерфейса. Інтензыўны редактор, панель керування або сторынка звярненняў можа справядліва мець вельмі большое количество маркапа. Проблемы пачынаюцца тады, калі адзін компонент стае ўсём месцам, дзе прыймаюцца абсалютна несувязаныя рашэнні.
Ні адна з наведзеных нижэй модэляў не ёсць за сваёю сутнасцю пакідальнай для React. Кожны з іх мае справядлівыя прызначэнні ў меньшых або болей цялеспрямованых сцэнарыях. Яны стаюць пакідальнымі толькі тады, калі яны павтараюцца ў вялікіх компонентах, таму што кожна такая павтарэнне прыбавляе зв’язкі, расширвае плошчу, якая паддаецца перерысаванню, і змушвае кожны будучы змена ўрахоўваць весь экран адразу.
Адыяванне іх не заставляе вас маць купу бесзначных, маленькіх компанентаў. У вас застаюць болей чыткія межы між станам, запрашэнням дадзеных, взаімадзеяю і атрыбутамі відраслів. Код стае простым у правкі, таму што менша колькасць элементаў функцыяналу може нехчасна вплываць адні на другія.
1. Компаненты, якія перадаюць весь функцыянал да нижэй
Аднам з прычын, якія часта спостерагаюцца на большых экранах, ёсьце включэнне вялікіх об’ектаў і дужо дугіх спісаў калбэкаў практычна ў кожны дзецінскі компанент.
Уявіце таблыцу з рэзультатамі, якая прыме нынешньага пользователя, цэлы об’ект прав, актыўныя фільтры, выбраную строчку, пазнаку завантажэння, калькі функцый для змены даных, прыстроі для адкрыцья модальных вікон і працэўнікі паведамленняя — а таксама калькі значэнняў, да якіх яна ніколі не прыходзіць безпосередня. Гэта таблыца пасля чаго перадае частку з гэтых даных безпосередня ў компоненты строчак, якія зноў перадаюць іх у адзінаковыя клеткі та кнопкі.
Якща паглядзець на дрэво файлав, усё выглядае як бы чыста раздзелена. Але калі паглядзець на рэальныя даны, якія пераходзяць между компонентамі, ствараецца іншая картына: кожны дзячыны компонент заўсёды з’еднаны з усім функцыяналам.
Это стварае два разлічныя проблемы. Першая — падае розуменне. Компонент, які прымае падзеў 15, важка для аналізу, таму што яго фактычная задача захаваная пад деталямі, які на самай працэ ўжо належаюць яго родніку. Другая — змяны распростраńваюцца на ўсе. Перэмена назвы аднаго поля дазволу чы перакалібраванне сігнатуры функцыі дзеяння значыць неабходнасць рэдагавання калькі слоёў компонентаў, якія з самага пачатку не мелі рэальнай адпаведнасці за гэтая поведзенне.
Рашэння — заменіць шырокія, функцыйна-оріўнтаваныя падзеї на вузкія контракты, якія апрантуюцца толькі да таго, за шта насправды адпавядае кожны дзецінскі компонент. Таблыце патрэбны толькі рядкі, стан выбору і ўсё такое як калбэк onRowSelected. Меню дзеянняў патрэбны толькі конкрэтныя дзеяння, якія є для данага запису — а не весь модэль дазнаўання плюс кожная функцыя мутацыі, якая існуе.
Ёжы ў таму зазвычай значыць стварэнне маленькага модэлю відображэння або модэлю дзеяння прытаму рэндарованню. Гэты дадзенны крок падготавіцы є цэнным, таму што ён змушвае «родзіча» перакласты необработаны стан прыемлівання ў меньшы, спецыяльна створанный інтэрфейс прытаму передачы інформацыі назад.
Мета ніколі не ў тым, каб проста зменшыць колькість параметраў зарады сабе. Асалодны рэзультат — калі «дзецям» больш не трэба розумець, як працюе весь аблік. Їм патрэбна толькі інформацыя пра тое, якія даныя паказваць і які намер адзвярнуць назад.
Компанент стае кранкім тады, калі кожны ўпаменок несе частку всіх внутрашняйх дадзеных «родзіча». Часткавыя, спецыяльна створаныя контракты дазволяюць часткам інтэрфейсу развівацца незалежна, замест таго, каб усю функцыя ўтягвалі ў кожную дыялогацыю.
2. Новыя об’екты і функцыі, створаныя пры кожным рэндарованні
Кожны компанент React парадоксальна чынама стварае новыя значэнні пад час атрыбутавання. Вы можаце перадаць об’ект з настройкамі дзецявому компаненту, фільтрацыяваць масэвую, або запісаць внутрашній обрабоўчы запуску зманов. У большасці случаў гэта не мае значэння.
Але ў глыбокім дрэве компанентаў свежаспадарожаны рэферэнс можа таямна нарабіць проблемы з мемаізацыяй на калькі слоёў нижэй за компанент, які яго стварыў.
Разглядзім дзецявы компанент, створаны з memo: ён заўсёды атрыбутуецца занова кожны раз, калі об’ект, які ён прыме, мае новую ідэнтычнасць пад час кожнага атрыбутавання ад бацькіго компанента, нават якщо фактычныя значэнні полей у гэтым об’екте ніколі не зменяюцца. Эфект перазапускаецца, таму што яго маса залежнасцей содержыць нова створаны об’ект налаштаванняў. Табліца пераскладвае сваія столбцы, таму што ўзгляды столбцоў былі перастроеныя пасля змены якога-небудзь абсалютна неякіснае стану модала.
Код можа выглядаць абсалютна стабільным, хоць і маскіруе гэтую проблему:
<ResultsTable
columns={[
{ key: "name", label: "Name" },
{ key: "status", label: "Status" },
]}
options={{
selectable: true,
compact: false,
}}
/>
З пункту зору JavaScript, як массив, так і об’екты ў яму становяць сабе абсалютна новыя элементы ў кожны момент рэндара. Тое, чыі гэта насправдзе вызывае проблемы, залежыць выключна ад таго, што іх викорыстоўвае.
Вжыванне useMemo і useCallback як універсальных рашэнняў таксама не є правильным падходам. Обертанне всаго ў механізмы мемаўвання толькі дадае ўсё большых проблем з залежнасцямі та додатковым навантажэнням. Кращы падход — спачатку запытацца, чы праўда трэба ствараць данні ў самы момент рэндара.
Статычная настройка можа быць вынесена цэлком за межы компаненту. Настройка, яка зміняецца час ад часу, можа быць размешчаная ў спецыяльным хуку. Калі об’ект існуе толькі для збору кальколькох прымітываў разам, зазвычай чыстэйша ўмова — перадаваць прымітывы безпосередня. Адпаведальныя за адбыванне запускаў падазроўкі трэба стабілізаваць за дапамогою useCallback толькі тады, калі ўпэўненасць у іх ідэнтычнасці дзейсна мае значэнне — для падпісоў, запам’ятаваных дзецячых элементаў аб дорогіх перысчытанняў у наступных частях коду.
Мета ніколі не ёсць прагненне да чыстоты рэферэнсаў сама па сабе. Стварэнне маленькіх значэнняў пад час атрыбутавання є стандартным і зазвычай нешкодным. Увагу трэба прысваяць толькі там, дзе ідэнтычнасць рэферэнсаў фактычна відпавядае за певную роботу ў іншых частях структуры.
У вялікай складовай адно маленька актуалізацыя стану можа перыядражаваць родніка і генераваць цэлы набор значэнняў. Якщо кожны дзецінскі элемент спрыяе змененым кансэкту як змененым дадзежам, адна маленька локальная актуалізацыя ператвараецца на анулюванне цэлага экрана.
3. Адзёрванне аднаго запиту, які працаваў для всього экрана
Вялікія сторанцы часта пачынаюцца з аднаго запиту, прызначанага для загаваркі всьго, што можа знадобіцца інтэрфейсу. Эты адны адпаведзь збірае падсумковыя показнікі, рядкі табліц, фільтры, супаўзвязаныя записы, даны прывілеяў, недавнюю історыю, а таксама поля, якія патрэбны толькі для модальнага вікна, якое корыстувач можа ніколі не ачыніць.
Эты падход на першы погляд здаецца эфектывным, адколі экран мае толькі адзін стан загрузкі і адны очвідны джераг дадзэнняў. Але ён таксама прыяёднае кожную частку сторанцы да найпамедлівейшага, наименее надзеянага сегмента таго адпаведзю.
Якщо служба історыі не працюе, галоўная табліца можа вовсе не атрымаць прадставлення. Вялікі набор дадзеных, якія з’яўляюцца ў звязку, падымае пачатковы размер пакета дадзеных нават для тых корыстнікаў, якія ніколі не ачынаюць панель, якая іх запатрэбавае. А аднаўленне толькі аднаго разделу вымагае повнае перзавантажэнне, таму што весь старонік выкарыстоўвае аднаковыя межы дадзеных.
Кращы падход — замяніць гэтыя запиты размеру староніка на межы дадзеных, якія адпаведаюць фактычным візуальным элементам экрана. Перш заўсёды завантажваецца основны контэнт. Дадзеныя для дапаможных панелей запрашваюцца толькі тады, калі яны становяцца актуальнымі. Дакладныя даны запрашваюцца, калі корыстнік ачынае конкрэтны запис, а не ўключаюцца автоматычна ў кожны рядок.
Это не значыць, што трэба ствараць сетавы запыт для кожнага простага віджэта. Чрэзмерна разліка такога роду стварае сабе ўласныя проблемы — запыты, якія пераходзяць адна за іншай, дублікаты запытоў і нэяднакавыя станы завантажэння. Рэальная межа, якая мае значэнне, зазвычай — это регіон з сабой жа жыцёвым циклам і сабой жа адзначэнням таго, што значыць „перазлом“.
Віджэт падсумку і журнал аудыту не трэба, каб яны працавалі адной часткай і ўспэшвалі або падводзілі. Табелю і рэдка вжыванаму панелі рэдагавання не трэба дзельцяваць той самы пачатковы набор даных. Калі гэтыя элементы будуць роздзелены, сторанка застаецца функцыональной нават тады, калі адна з неабяжных частак перестане працаваць.
Самы компанент стаець значна простейшым для разумэння, адколі ёму больш не трэба моделюваць адну вялічезную, разгалужаную структуру адпаведзя. Кожны рэгіон отрымае тыя данні, якія ў iм насправдзе патрэбны, а банкірацыя кэша можа быть направлена толькі на тые записі, якія зменіліся, а не на весь старонку.
Вялікія компаненты часта стаюць кранглівымі самэлькі тады, калі ўсё ў іх модэлі даных задаецца практычнасцю на рэвені старонкі, а не па природнам жыцёвым цикле окремых функцый, якія знаходзяцца ў іхней структуре.
4. Адзьёмка гэнерычных компанентаў, карыстоўнае дзесяткі флагаў
Звычны першы спосаб для адвароту дуплікацыі — стварэнне адчынна налаштовываемых компанентаў. Адзін панель можна зробіць такім, каб яго можна было шукать, выбіраць, пагрупаваць у сторункі, рэдагаваць, экспортуваць і згортваць, пры чым усё гэта карыстоўваецца зростаючай колькасцю булевых атрыбутаў.
Це здаецца падатлым для паўтаральнага выкарыстання, таму што, здаецца, ён пакрывае шырокі спектар сцэнарыяў. У рэальнасці кожны новы экран проста значыць дадаўшчы ўсё больш адноўу умову да вялікага кола існуючых.
<DataPanel
searchable
selectable
showToolbar
allowExport={canExport}
inlineEdit={mode === "admin"}
compact={isInsideModal}
hidePagination={rows.length < 20}
stickyHeader={!isMobile}
/>
Аслівныя проблемы — гэта не толькі вельмі велика колькасць параметраў. Флагі взаімаедражаюць адно з другім неперакладзанымі спосабамі. Рэдагаванне ў ручным режыме парадзіцца інакш, калі актыўны режым выбору. Компактны лейаут патрабуе сабе самастойнай логікі палітры інструментаў. Загальны заголовак ламаецца ўнутры певнага контейнера з пераплывам. Колькасць можлівых комбінацый флагаў расте набліжна шчыльней, чым спроможнасць каго-лібо ўсё ж такі яе працаваць.
Компонент тыха ператвараецца на другое застосоўчы праграма, якае хаваецца ўнутры першага.
Замена такога викорыстоўвання на аднойчынную базу, заснованую на флагах, означае прабачэнне меншых, складальных элементаў, а таксама явных, окремых варіянтав там, дзе разлікі ў значным ступені. Тэблу можна спаўніць з інструментамі, кантролем пагінацыі і средствам для выбору за патрэбай. Рэдагавальная тэбла можа існаваць як самастоятельная функцыя, а не проста як ўсё той жа булевы розгалужэння, ўкладзеныя ў універсальны компонент тэблы.
Калі два інтэрфейсы раздзеляюць абоўязкова аднаковую вучоўную структуру, гэтая структура викорыстоўваецца безпасова. Калі ж яны толькі супадаюць у скріншоте, але выконваюць разныя процесы, прымусовае ўжыванне адной і той жа абстракцыі стае безсэнсавым.
Это вяртае некія дуплікацыі, якія раней былі схованы, і спачатку гэта можа здавацца крокам назад. На практыцы такія дуплікацыі зазвычай значна дешавей, чым архітектура з галужэнням, яку ўсунуць. Два маленькіх, адзелёных компоненты можу змянювацца незалежна, без таго, каб кожная змяну трэба было перакантроліваць у співвярэнні з дзесяткам некалякучых камбінацый флагоў.
Павторны выкарыстоўкі ёсць корыстныя, калі яны захоўваюць адну, стабільную контрактнае угоду. Яны стаюць рызыкавымі ў той момент, калі іх досягаюць, розтягваючы адзін компонент, каб той таёмна представляў калькі разных продуктов адразу.
5. Адключэнне стана модальнага вікна ад сторонніцы, якая яго ачыніла
Большыя компоненты часта становяцца керуючымі элементамі модальных вікон. Яны стежаць за тым, чы розмовна панель ачынена, які запис зараз моцна змяніць, на якам кроку процеса ён знаходзіцца, чы яго зараз зберагаюць, і якая пасляпэўная адмова з’явілася.
Частае тое, што сама сторанка містіць толькі адзін рядок, який запускае адкрыцьце модальнага вікна, пры тым як ёй неабяжна адпавядаць за весь цыкл жыцця гэтага дыалогу.
Гэта стварае стан, які застаецца актыўным нават тады, калі дыалог ўсё жоўткі. Правильная адкрыцьце значыць вычысцэнне выбраных записаў, значэнняя полей для черніцы, памылак верыфікацыі і незавершаных запросаў, усьго гэтага па аднаковам порядку. Адкрыцьце іншага дыалогу пасля гэтага можа прывести да таго, што будуць випадкова перысвайцьце засталыя значэнняя з таго, што было адкрыта раней.
Разгляд кожнага непростага дыалогу як самастоятнай функцыі, а не як умовнага JSX-элементу, прыўязанага да сторанкі, зменяе гэтую дынаміку. Задача сторанкі стае выбіраннем таго запису, над якім паўінен дзеяць корыстнік. Сам дыалог адпавядае за даныя для черніцы, логіку верыфікацыі, внутрашніе крокі і цыкл адправкі.
У дзеяных случаях простае адключэнне дыялоговага вікна толькі тады, калі яно насправды ачыяеся, дастаць можлівасць автаматычна перазначыць яго тымчасовы стан. У іншых случаях стан трэба зберагчы пасля закрыцья, таму ён пераходзіць у спецыяльны режым проекту, замест таго каб застаўся спаяным з таблицай сторанкі і станам фільтраў.
Такое раздзелэнне таксама робіць асінхронную працу значна безпечней. Дыялогавая вікно з магчымасцю рэдагавання можа анулюваць чы скасаваць застарэлыя запиты як толькі ёна закроюецца. Дзеянне з запісу можа сама выбраць, чы дыялогавая вікно застаецца ачытым нават у разе падзейвання працяў. Сторанка больш не павінна координаваць внутрашні механізмы формы, якія ёй насправды не зрозумелы.
Старая сторынка яшчэ контролюе звязак межа таблам і дыялогам — яна ведае, калькі запис выбраны і што павінна адбыцца пасля успеху выконання змены. Але яна больш не контролюе кожны поле і пераходы толькі таму, што дыялог быў запусцаны з гэтай сторынкі.
Модальны элемент можа выглядаць візуальна на верхнім слое экрана, але гэта візуальна структура не значыць, што ўсё його жыццўы цикл стану павінен знаходзіцца ўнутрь компонента экрана.
6. Выяўленне прав на адзеленых частках JSX
Логіка автарызацыі часта прасачваецца ў компоненты па маленькіх частках. Кнопка становіцца невидачай для пераглядачаў, пункт меню блокуецца пасля архіваўвання записа, аякшы раздел выкарыстоўваецца толькі для адміністратараў.
Гэтыя умовы множыцца, таму што JSX дазволяе лёгка дадаць ўсё больш адзіных перакананняў:
{user.role === "admin" && record.status !== "archived" && (
<DeleteButton />
)}
Калі компанент стае вялікім, ён можа мець калькі слегка разныя версіі таго, што за зместам являе сабой адно і тое ж правілу. Адна умова кантролюе, чы рэч ўвідны, іншая — чы яе обрабоўчык запускаецца, а трэця — чы пункт меню стае сірым. З часам гэтыя калькі пачынаюць адступаць адзін ад другога і перестаюць састаўляцца.
Гэты адступленне ёсць пераважна багам правільнасці, але ён таксама пагаршвае чытаемасць. Маркап для макета заплутваецца з правіламі бізнесу, і кожны, хто чытае компанент, вынужаны ў своем уме аналізаваць выразы дазволу, распакованыя па всім дрэву, толькі каб зразумець, што робіць сторанка.
У замен на распаковванне неапранутых перагледоў правіла ў JSX, можна заздалегідь вырахаваць чыстае сэт кампетэнсіў:
const capabilities = getRecordCapabilities({
user,
record,
organization,
});
З таго моменту компанента можа проста запытаць, чы роўным лівам корыстніку разрэшана рэдагаваць, архіваваць, экспортаваць чы выдаліць заданы запис. Назвы паказваюць фактычныя рашэнні, прынятые ў зв’язку з продуктом, а не выклікаюць показ сырых полей базы дадзеных чы стрэнгаў ролей.
Ёсць важна з’ясавіць, што гэта не пераносіць адпаведальнасць за забезпечэння безпекі на сторону кліента. Бэкенд застаецца фактычным межам автарызаціі — нічога не змянюецца. Об’ект можлівасцэй на фронтендзе існуе чыста для таго, каб даць інтерфейсу адна ўніверсальная правдзівая база дадзеных, замест таго, каб прадукуваць тыя ж правіла ў пяці разных візуальных розгалужэннях, якія моглі б таямна выйсці з сінхронізацыі.
Это таксама значна спрыяе тэставанню самых правіл. Вы можете пераканацца ў логіку дазволаў для разных роляў, канфігурацый власнасці, статусаў і настройкаў арганізацыі, не прадстаўляючы цэлаг дрэва компонентаў. Калі змянюецца падстаўная політыка, суседзяючы компонент зазвычай вовсе не патрабуе змян.
Большыя дрэвы JSX становяцца ламкімі, калі ў іх таксама на месцы ствараюцца бізнес-правілы. Прадстаўленне должна больш за ўсё стосавацца выкарыстоўвання рашэнняў, якія вже былі прыменены, а не перзначэння гэтых рашэнняў з нуля ў кожной умовнай гілцы.
7. Адменшэнне загальнага завантажэння сторункі і флажоў адказаў
Большасць вялікіх компанентаў спачатку працуюць проста, маючы адзін значэнне isLoading і адзін параметр error. Гэта нормальна, калі сторана выконвае толькі адну задачу. Але калі функцыянал расте, гэтыя два показнікі начынайцю працаваць над описам кальколька несувязаных дзеянняй адночасна.
Старана можа запрашваць свае пачатковыя даны, апавержаць табліцу на фоне, зберагаць форму, выдаліць рэядок і экспортуваць звярненне — іноды ўсё гэта за адной сесіі. Адзін спяльны булевы показнік загрузкі не можа паведаміць, яка з гэтых операцыяй на самай працуе. Адна запрос завершваецца і зменшае показнік на false, тады як абсалютна іншая запрос усё ўжо працуе. Адзіныя бягавыя памылкі перазапісуюць тые, якія мелі описваць пачатковую загрузку стараны. Весь інтэрфейс зацікаўляецца толькі таму, што якась несувязаная апавержэння на фоне працуе.
Лепшы падход — заменіць гэтыя флагі статусу для всей сторонкі на статус, який належыць конкрэтнай операцыі, яку ён описвае.
Это значыць, што пачатковы запит можа выконваліся, тады калі існуючая табліца застаецца цэлкам видной і інтерактыўной. Одна строчка можа быць у процесе выдалення, не блакучы кожную іншую строчку на сторонцы. Рэдагувальнік можа быць у процесе адправкі, тады калі фільтры сторонкі застаюцца прыдатнымі. Экспорт можа паказваць свой сопанскі показчык прогрэсу, не натыкаючыся на ситуацію, калі весь экран становіцца недоступным.
Рэзультатам являюцца болейшыя індывідуальныя значэння статусу, але кожна з іх мае чыстае значэнне. У коде не трэба ўгадвалаць, да чаго на самай працэўнай момант чыста isLoading насправды апісвае.
Тая ж самая логіка прыменяецца і да адзінакоў: не кожны з іх павінен пераходзіць на адну-едзиную экран памылак вышэйшага рангу. Адзінаковы необавязковы панель можа показаць свой сопны варыянт запуску. Памылка мутацыі можа застацца ў межах таго рабочага прайсупутку, який яе спрычыніў. Сама галоўная сторонка становіцца недоступной толькі тады, калі даны, неабходныя для ўтварэння гэтай сторонкі, не падаюцься з загаданнем.
Гэта стварае болей стойкі інтерфейс і модэль компанентаў, які лёгкае разумець. Статус больш не спрыяваецца як глобальны толькі таму, што операцыя знаходзіцца ўнутрь вялікай компаненты сторонкі.
Вялікая компанента часта здаецца нестабільной, таму што калькі разныя рабочыя прайсупуткі змушаны дзеліць аднаковы сігнал. Якщо кожны прайсупутак будзе маць свой статус, інтерфейс зможа чыста паказваць, што самэў працюе, а шта — няма ў даны момент.
Мета ніколі не была толькі меньшымі файламі
Калі гэтыя шаблоны будуць адзёваны, багато компанентаў дэйсна стануць корачэй — але гэта парагонны эфект, а не сапраўдная мета.
Сапраўдны выгода — гэта тое, што ў межах адной зоны атрыбутавання прыменяецца меньша колькасць некалякзваных рашэнняў. Дзеціныя компаненты атрыбутуюцца кантрактамі, прызначанымі для ўсунення толькі іх сопрацоўнасці, а не для всего стану функцыяны. Адсутнае паводліванне большых паддрэваў перестае тыхо анулюватыцца ў кожны момент атрыбутавання. Данныя запрашваюцца ў залежнасці ад таго, што на самай справе відразумеваецца на экране, а не за дапамогою аднароднага запыту, які павінен адпрацоўваць цэлую сторану. Компаненты, якія можна перадаць ў іншых проектах, перестаюць накапліваць новыя флагі для кожнай можлівай варіяцыі, якая колі-небудзь могла знадобіцца.
Модалкі самі керуюць своім станам. Правіла дазволу ператвараюцца на іменаваныя можлівасці заместо усунутых у тэксте умов. Станы загрузкі і адзінакоў належаць конкрэтным операцыям, якія іх ствараюць.
Дзеяныя экраны застаюцца вялікімі проста таму, што сам інтэрфейс ёсць практычна вялікі — і гэта нормальна справа. Код становіцца прыемнейшым для работы не таму, што ён стаў меньшым, а таму, што яго розмер відбівае рэальную, видную структуру заместа схованай логікі коордынацыі.
У гэты момент пытанне, якое варта задаць пра компонент React, — не тое, сколькі ў яго ліній. Це тое, сколькі незалежных прычын можа змусіць яго змяніцца. Якщо, каб праверыць рэдагувальнік, трэба таксама разумець запиты до табелі, стан экспорту, модэль праваў і кожны модальны элемент на сторанцы, то проблема не ў форматаванні чы розмерзе файлу. Межы адпаведальнасці проста пазначаныя не там.
Вялікія компоненты React застаюцца керованымі як толькі перестаюць прабаваць дзеяць самастоятельна, як цэлыя прыкладніцы.
Мета ніколі не была трывалым дзеленнем файлу, пакуль кожная функцыя не стане мінімальной.
Мэтаем яе ўбедзіцца, што кожны элемент функцыяналу ведае толькі пра тыя рашэнні, за якія ён насправды адпаведальны.
Супаўязаныя матэрыялы
- Дзесяць схованых проблем компонентаў React, якія спамляюць сучасныя дапытлі — Дазвольце вам дакладна пазнакоміцца з дзесяцьма распашчытнымі памылкамі у компонентах React — ад недастатку семантычнага HTML да відсутнасці механізмаў мемаізацыі — і з спосабамі ўсунення гэтых проблем, каб дапытлі застаўаліся швайнарамі, доступнымі і без бягоў у 2026 годзе.
- Усуненне перанасыцяючых параметраў у React за дапамогою композіцыі і слотаў — Дазвольце вам з’ясаваць, чырэз што параметры React з великай канфігурацыяй ствараюць проблемы з адтрымкай, і як інверсія кантролю, композіцыя і слоты дапамагаюць ствараць справжна перадузначальныя компоненты.