10 експертни съвета за ReactJS, които трябва да знаете днес

Експертни съвети ReactJS

React се превърна в един от най-популярните инструменти, намерени в библиотеката на уеб разработчик, но както всяко нещо, трябва да се научите как да го използвате правилно, за да извлечете максимума от него.

Ако се борите с React, имате късмет. Тъй като сме съставили селекция от основни техники, които ще подобрят изхода на вашия код. Прочетете, за да откриете как да извлечете максимума от рамката. Искате да създадете сайт, без да е необходимо да кодирате? Използвай уеб конструктор . И ако се притеснявате да поддържате нуждите на вашия сайт, прилично уеб хостинг услугата може да ви подкрепи.



01. Компоненти от по-висок ред

Компонентите често споделят функционалност помежду си, като регистриране или мрежови заявки. Те могат да станат трудни за поддръжка, тъй като броят, използващ тази логика, се увеличава. Разработчиците се насърчават да абстрахират споделен код и да го включат, когато е необходимо.



В редовно приложение на JavaScript концепцията за a по-висок ред функцията е един от начините да се подходи към нея. Накратко, те са функции, които приемат други функции като аргументи и им придават поведение. Масивни методи като карта и филтър са примери за тях.

Компонентите от по-висок ред (HOC) са начинът на React да постигне същото. Те са компоненти, които придават поведение на преминал компонент.



const Logger = WrappedComponent => ( class Logger extends Component { componentDidMount() { console.log(‘mounted’); } render() { return } } ); export default Logger(MyComponent);

В този пример тук функцията връща нов обвит компонент, който изобразява оригиналния, който е бил предаден заедно с всякакви подпори. HOC са редовни компоненти и могат да направят всичко, което могат, като предаване в собствения си реквизит и свързване с обратно извикване на жизнения цикъл. След това функцията обвива оригинала при експортиране. Използвайки HOC, това прави често използваните парчета код по-лесни за поддръжка и тестване. Когато се изисква специфична функционалност, те са лесни за влизане, сигурни в знанието, че тя ще се държи както се очаква.

02. Контейнерни и презентационни компоненти

потребителски интерфейс на календара

За сложни потребителски интерфейси като календар е приемливо да поставите контейнер в презентационен компонент, стига поведението им да остане отделно

Винаги е важно да се разделя въпроса, когато се разработват различни части на приложение. Където е възможно, пазете методите за извличане на данни далеч от начина, по който се показват. В React се използва подобна концепция, когато става въпрос за контейнерни и презентационни компоненти.



най-добрата SD карта за
class ProductsContainer extends Component { [...] componentDidMount() { fetchProducts() .then(products => this.setState({products})); } render() { return ; } }

Тук продуктите се извличат по външен метод вътре в контейнера, държат се в собствения му магазин и след това се предават като подпори на презентационния компонент Продукти който ги показва.

Компонентът на контейнера не знае как да показва информацията, той знае само как да го извлече и коригира. По същия начин презентационният компонент не знае откъде идват данните. Функционалността на който и да е компонент може да се промени, без да засяга другия.

Може да има друг раздел на приложение - или отделно приложение изцяло -, което може да използва един и същ презентационен компонент. Като работи само върху реквизит, всяка част от приложението ще трябва само да създаде свой собствен контейнер около него.

Този подход също прави нещата по-лесни за единичен тест. Контейнерните тестове трябва само да се притесняват за състоянието, което е зададено, докато презентационният компонент може да бъде предаден статичен реквизит за постигане на предсказуем резултат.

03. Граници на грешки

Без значение колко добре е съставен проект, грешките все пак ще намерят начин да се намерят. Те могат да се случат при много специфични обстоятелства, да бъдат трудни за диагностициране и да оставят приложението в нестабилно състояние - абсолютен кошмар както за потребителите, така и за разработчиците.

React v16 беше пуснат през септември 2017 г. Като част от тази актуализация, всички необработени грешки вече ще демонтират цялото приложение. За да се противодейства на това, беше въведена концепцията за границите на грешките. Когато възникне грешка в даден компонент, той ще се появи през родителите си, докато или удари корена на приложението, където ще се демонтира, или намери компонент, който ще се справи с грешката. Идеята за границата на грешките е общ компонент, който се грижи за грешките за своите деца.

componentDidCatch(error, info) { this.setState({ error: error.message }); } render() { return this.state.error ? : this.props.children; }

Чрез включване в нов метод на жизнения цикъл, грешката може да се съхранява в състояние и да замени дъщерното съдържание. Това ефективно огражда този клон на приложението от останалите.

Границите работят като блокове try / catch. Те могат да бъдат вложени един в друг без проблем, но всички грешки, които възникват в тях, ще бъдат уловени от следващата граница нагоре. Най-добре е те да бъдат максимално опростени.

04. Портали

Съдържанието на портала се появява в оригиналния компонент в React

Съдържанието на портала се появява в оригиналния компонент в DevTools на React

Има моменти, в които компонентът трябва да излезе от родителя си, за да бъде другаде в DOM. Модалните прозорци например принадлежат към най-горното ниво на страницата, за да се избегнат проблеми с z-индекса и позиционирането.

Порталите също са част от v16, което позволява на React да изобразява компоненти в DOM възли, напълно отделни от останалата част на приложението. Съдържанието ще запази мястото си в структурата на React, но ще се покаже другаде. Това означава, че всяко събитие, което се задейства в портала, ще се издига през родителя в React, а не в самия елемент на портала.

ReactDOM.createPortal( this.props.children, document.getElementById(‘modal’), );

Чрез създаването на специален компонент порталът може да бъде върнат от функцията за рендиране. Когато трябва да се покаже съдържание, то може да бъде обвито в този компонент и след това да се покаже в другия елемент.

05. CSS със стилизирани компоненти

по подразбиране и първичен Reactjs

Компонентите получават рандомизирано име на клас, за да съвпадат със стила, което за съжаление може да затрудни рестайлинга в DevTools

Стилът на приложение с компоненти за многократна употреба може да доведе до проблеми с противоречащи имена на класове. Конвенции като BEM помагат за смекчаване на проблема, но те имат за цел да лекуват симптомите, а не проблема.

Възможно е компонентите да поемат собствените си стилове. Това означава, че те имат начин да регулират визуалните изображения в движение, без да са необходими нито вградени стилове, нито превключвания на класове. Едно такова решение е стилизирани компоненти , който използва JavaScript в своя полза.

Както подсказва името, вместо да създава classNames, той създава изцяло нови готови компоненти. Системата използва ES2015 маркирани шаблони литерали, които могат да приемат редовен CSS и да приложат това към заявения елемент.

const Button = styled.button` font-size: 2rem; background: ${props => props.primary ? ‘#3CB4CB’ : ‘white’}; `;

Използвайки заместител, стилът може да се променя динамично. В този пример фонът на бутона се променя в зависимост от това дали бутонът е подаден a първичен опора Тук може да се използва всеки израз за изчисляване на необходимия стил.

Създаденият компонент може да се използва точно както всеки друг и всички реквизити ще бъдат предадени. Персонализираните компоненти също могат да бъдат оформени по същия начин чрез използване стил (ComponentName) вместо.

06. Използване на React-специфична облицовка

Код на Visual Studio

Редакторите на кодове като Visual Studio Code могат да се интегрират с линтери и да предоставят на потребителите обратна връзка в реално време, когато компонентите се записват

Един от най-добрите начини да поддържате кода чист е да използвате инструмент за свързване. Те определят набор от правила, които кодът трябва да следва и ще подчертаят навсякъде, където не успее. Като гарантираме, че целият код преминава тези правила, преди да се влее в кодовата база, проектите остават поддържани и качеството на кода се повишава.

ESLint е популярен линтер за различни JavaScript проекти. Налични са приставки, които анализират конкретни стилове на кода. Един от най-често срещаните за
React е npm пакет, наречен eslint-plugin-response .

По подразбиране той ще провери редица най-добри практики, като правилата проверяват нещата от ключове в итератори до пълен набор от типове проп. Повече опции могат да бъдат активирани за всеки проект чрез актуализиране на конфигурационния файл .eslintrc.

Друг популярен плъгин е eslint-plugin-jsx-a11y , което ще ви помогне да разрешите често срещани проблеми с достъпността. Тъй като JSX предлага малко по-различен синтаксис на обикновения HTML, проблеми с всичко текст и табиндекс например няма да се взимат от обикновени плъгини. Той също така ще вземе специфични за React проблеми, като например възлагане въздух подпори с различен синтаксис.

07. Тестване на моментна снимка с Jest

Е

Jest ще покаже какво точно се е променило между двете снимки, което може да помогне за идентифициране на умишлени промени от случайни

Въпреки че пълното покритие на теста има очевидни предимства, това си струва. Когато пишете много малки компоненти, тестовете могат да отнемат повече време за кодиране, отколкото самия компонент. През повечето време е необходимо само да се провери дали нищо не се е променило.

Jest е рамка за тестване, създадена от Facebook. Една от уникалните му функции позволява на разработчиците да улавят гледката на даден компонент в даден момент и да го сравняват с евентуални промени в бъдеще. Промените - умишлени или не - ще бъдат маркирани за приемане или отхвърляне. Тестовете стават бързи, предсказуеми и лесни за отстраняване на грешки, когато е лесно да се види точно какво се е променило.

как да направите лого на YouTube с Photoshop
test('Button renders', () => { const button = renderer .create(Button) .toJSON(); expect(button).toMatchSnapshot(); });

Когато тестът стартира за първи път, Jest ще преобразува изгледа в JSON и ще го съхрани в специална директория, която може да бъде ангажирана с контрол на източника. При следващото му изпълнение той проверява файла и ще маркира всички разлики. Ако тази промяна е била умишлена, моментната снимка се заменя и тестът преминава. Научете повече за Jest и тестването на моментни снимки .

08. Разделяне на кода

Както при всяко приложение на една страница, всичко се обединява в един файл, който може бързо да разцъфне по размер, ако не се държи под контрол. Инструменти като Webpack могат да помогнат да разделите този пакет на по-управляеми парчета, които след това могат да бъдат поискани при необходимост.

Тъй като React насърчава създаването на много по-малки компоненти, има много възможности за разбиване на пакета. The реагиращо натоварване пакет позволява на компонент да дефинира точно какво трябва да изобрази и Webpack може автоматично да раздели пакета си, за да побере това.

const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () => Loading... , });

Loadable е HOC, който динамично ще импортира всичко, от което се нуждае компонентът. Необходими са няколко настройки, като например какво да се показва, докато всичко се зарежда, което го прави изключително персонализиращ се. LoadableButton след това може да се използва като обикновен компонент без проблем.

За по-големи приложения с маршрутизация може да е по-изгодно разделянето по маршрут, вместо по компонент. Общите пътища могат да бъдат изтеглени с една заявка и могат да помогнат за ускоряване на нещата. Важно е да има баланс между броя на пакетите и общия им размер, който ще се променя в зависимост от нуждите на приложението.

как да нарисувате концептуални герои

Повече подробности за реагиращо натоварване може да се намери тук .

09. Предаване на сървър

При големите приложения потребителите могат да гледат празен екран, докато сайтът се зарежда. В идеалния случай това трябва да е възможно най-малко. Чрез изобразяване на първоначалния изглед на сървъра, възприеманото време за зареждане може да бъде намалено, което идва с допълнителното предимство, което позволява на роботите да анализират по-лесно съдържанието.

React вече е оборудван за обработка на рендиране на Node сървъри. Предлага се специална версия на DOM визуализатора, която следва същия модел като от страна на клиента.

import ReactServer from 'react-dom/server'; import App from './App'; [...] ReactServer.renderToString();

Този метод ще изведе обикновения HTML като низ, който след това може да бъде поставен в тялото на страницата като част от отговора на сървъра. От страна на клиента React открива предварително изобразеното съдържание и безпроблемно продължава там, където е спряло.

Рендирането на сървъри в приложения, които използват разделяне на код, маршрутизация или държавни контейнери, може да се усложни, но все пак е възможно. Redux, например, ще изгради предварително зареден държавен обект на сървъра, който може да хидратира клиентската страна при създаването на магазина.

10. Интернационализация

Intl API

API на Intl се поддържа в най-новите версии на повечето браузъри, а за други са налични полифилове

За глобалните уебсайтове интернационализацията (i18n) е жизненоважна за ангажирането на местната аудитория. За клиентски библиотеки като React, единствената опция, която се използваше, беше да обслужва бавни, обемисти библиотеки за обработка на неща като превод и форматиране на числа. Съвсем наскоро родният Intl API е достъпен в браузърите, за да се избегнат големите разходи за изтегляне.

Библиотека от екипа на Yahoo, наречена React Intl, помага да се въведе този нов API за проекти на React. Специален набор от компоненти автоматично превежда низове и форматира номера, дати и валута. Той е част от колекцията си от i18n инструменти, наречена FormatJS.

Всеки компонент взема подпори, които отразяват настройките, налични за Intl API. Като предоставя необходимия формат на датата, API може да използва това, което знае за локала на браузъра, за да изчисли низ. Всеки път, когато някой от тези реквизити се промени, низът се актуализира автоматично.

Струнните преводи изискват добавяне на подходящ превод към съобщения проп към доставчика в основата на приложението, но който може да се използва в цялото приложение. Библиотеката открива идентификатора и при необходимост замества съдържанието. Подробности за всички опции в тази функция можете да намерите тук . Ако искате да запишете тестове на вашите уеб страници, помислете за експортиране като PDF файлове и запазване в споделяне съхранение в облака .

Тази статия първоначално е публикувана в брой от 2018 г. от нето , най-продаваното списание в света за уеб дизайнери и разработчици. Абонирайте се тук .

Свързани статии: