Концепции да станете усъвършенстван разработчик на React

Увеличете реагирайте ниво с помощта на тези техники!

Реагирайте лого

Всички обичаме ReactJS. Това е един от най-добрите и популярни начини за създаване на SPA (Single Page Application). Той предлага гъвкавост и удобство. Той има чудесна функция да го използва за създаване на един компонент в съществуващия уебсайт или да го използва за създаване на целия уеб сайт от нулата.

Сега ReactJS е рамка, използвана от много други рамки или набори от инструменти, като NextJs, GatsByJs, Razzle, AfterJs и т.н. Така че ставането на по-добър ReactJS разработчик от своя страна ще ви помогне да използвате по-добре тези рамки.

Използвайте Fragment вместо div

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

Според официалното ръководство,

Понякога прекъсваме HTML семантиката, когато добавяме
елементи към нашия JSX, за да накараме React кода да работи, особено когато работим със списъци (
    ,
      и
      ) и HTML . В тези случаи трябва по-скоро да използваме React Fragments, за да групираме заедно множество елементи.
      import React, {Fragment} от 'реагира';
      
      функция ListItem ({item}) {
        връщане (
          <Фрагмент>
            
      {item.term}       <Дд> {item.description}        ); } функция Речник (подпори) {   връщане (     
            {props.items.map (item => (                ))}        ); }

      За повече информация вижте документацията за фрагментите.

      Използвайте контекста повече

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

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

      един пример за задаване на тема от официалните документи,

      тематично context.js

      export const themes = {
        светлина: {
          преден план: „# 000000“,
          фон: „#eeeeee“,
        }
        тъмно: {
          преден план: „#ffffff“,
          фон: '# 222222',
        }
      };
      export const ThemeContext = React.createContext (
        themes.dark // стойност по подразбиране
      );

      тематични-button.js

      import {ThemeContext} от './theme-context';
      клас ThemedButton разширява React.Component {
        render () {
          нека реквизит = this.props;
          нека тема = this.context;
          връщане (
            <бутон
              {... подпори}
              style = {{backgroundColor: theme.background}}
            />
          );
        }
      }
      ThemedButton.contextType = ThemeContext;
      експортиране по подразбиране ThemedButton;

      app.js

      import {ThemeContext, themes} от './theme-context';
      импортиране ThemedButton от './themed-button';
      // Междинен компонент, който използва ThemedButton
      функция Лента с инструменти (подпори) {
        връщане (
          
            Промяна на темата
          
        );
      }
      клас приложение разширява React.Component {
        конструктор (подпори) {
          супер (подпори);
          this.state = {
            тема: themes.light,
          };
      this.toggleTheme = () => {
            this.setState (състояние => ({
              тема:
                state.theme === themes.dark
                  ? themes.light
                  : themes.dark,
            }));
          };
        }
      render () {
          // Бутонът ThemedButton вътре в ThemeProvider
          // използва темата от състояние, докато тази отвън използва
          // тъмната тема по подразбиране
          връщане (
            
              
                
              
              <Раздел>
                
              
            
          );
        }
      }
      ReactDOM.render (, document.root);

      Имайте поне една граница на грешки

      React 16 се предлага с невероятна функция Граници на грешките. Както подсказва името, тя обвързва грешката на всички дъщерни компоненти. Идеята е много проста. Създайте компонент React и го използвайте като родител, където искате да се справите с грешките. Ако има някаква грешка в дочерния ви компонент, тогава ще бъде извикан компонентът на границата на грешките, за да се справи с грешката.

      Имайте предвид, че грешката при изобразяване се обработва с помощта на граници на грешки. Императивните грешки, като например в манипулаторите на събития, трябва да се обработват с помощта на блокове с опит / улавяне на JavaScript.

      Използвайте компонентDidCatch (), за да регистрирате информация за грешки.

      клас ErrorBoundary разширява React.Component {
        конструктор (подпори) {
          супер (подпори);
          this.state = {hasError: false};
        }
      статичен getDerivedStateFromError (грешка) {
          // Актуализирайте състоянието, така че следващият рендер ще покаже резервния потребителски интерфейс.
          return {hasError: true};
        }
      компонентDidCatch (грешка, информация) {
          // Можете също да регистрирате грешката в услуга за докладване на грешки
          logErrorToMyService (грешка, информация);
        }
      render () {
          ако (this.state.hasError) {
            // Можете да рендирате всеки потребителски резервен потребителски интерфейс
            връщане 

      Нещо се обърка.

      ;     }
      върнете това.props.children;
        }
      }

      След това можете да го използвате като обикновен компонент:

      
        
      

      Ако компонентът ErrorBoundary има грешка в себе си, той не може да се справи с нея .

      Функцията беше там в React 15, наречен unstable_handleError.Този метод вече не работи и ще трябва да го промените на компонентDidCatch във вашия код, като се започне от първата 16 бета версия.

      За тази промяна React предостави кодомед за автоматично мигриране на вашия код.

      Използвайте изграждане на производство в LIVE среда

      Официалният сайт изброява много конфигурации, които могат да повишат вашата производителност. Не забравяйте да ги проверите, преди да ги разгърнете в LIVE среда.

      Вижте ръководството тук, reactjs.org/docs/optimizing-performance

      Ще ви отнеме само 10 минути за конфигуриране и ще даде невероятно увеличаване на производителността на приложението ви.

      Използвайте Refs за взаимодействие с дете

      Можем да използваме Refs, за да задействаме анимация, избор на текст или да управляваме фокуса.

      Например,

      За да зададем фокус в React, можем да използваме Refs to DOM елементи.

      Използвайки това, първо създаваме ref на елемент в JSX на клас компоненти:

      клас CustomTextInput разширява React.Component {
        конструктор (подпори) {
          супер (подпори);
          // Създайте ref за съхранение на текстовия вход DOM елемент
          this.textInput = React.createRef ();
        }
        render () {
        // Използвайте обратния разговор `ref`, за да запазите препратка към въвеждането на текст DOM
        // елемент в поле на инстанция (например, this.textInput).
          връщане (
            <вход
              тип = "текст"
              Код = {this.textInput}
            />
          );
        }
      }

      Тогава можем да го фокусираме другаде в нашия компонент, когато е необходимо:

      фокус () {
        // Изрично фокусирайте въвеждането на текст, използвайки суровия DOM API
        // Забележка: ние имаме достъп до "current", за да получим DOM възела
        this.textInput.current.focus ();
      }

      За повече информация вижте фокусирането върху програмирането.

      Използвайте разделяне на код

      Ако използвате CRA (създайте приложение за реакция) или NextJs, вече ще има конфигурационен файл за уебпакет. Той ще създаде един файл (пакет), който ще съдържа цялото ви приложение. Сега, ако използвате библиотеки на трети страни или приложението ви стане по-голямо, файлът ви в пакет също ще бъде по-голям. Когато потребителят дойде на уебсайта, тогава браузърът ще изтегли целия пакет от файлове и след това ще го направи. Това може да забави драстично вашия уебсайт, така че разделянето на кода позволява на генерираните да се разделят и да създават множество изходи. Така браузърът ще зареди подходящия пакет, когато има нужда от него. От своя страна подобряване на времето за зареждане на сайта.

      Можем да използваме React.lazy, за да постигнем това,

      Официална забележка: React.lazy и Suspense все още не са достъпни за рендериране от страна на сървъра. Ако искате да направите разделяне на код в приложение, предоставено от сървър, все пак препоръчваме React Loadable. Той има хубаво ръководство за разделяне на пакети с изобразяване от страна на сървъра.

      Можете да разделите кода си по различни начини, но добрата отправна точка се основава на маршрути,

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

      Ето пример за това как да настроите въз основа на маршрута разделяне на кода във вашето приложение с помощта на библиотеки като React Router с React.lazy.

      импортира {BrowserRouter като Router, Route, Switch} от 'react-router-dom';
      import React, {Suspense, lazy} от 'реагира';
      const Home = lazy (() => import ('./ route / Home'));
      const About = lazy (() => import ('./ route / About'));
      const App = () => (
        
           Зареждане ... }>
            
              <Маршрут точен път = "/" компонент = {Начало} />
              
            
          
        
      );

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

      Можете дори да използвате ErrorBoundary като родител на Suspense, за да се справите с други грешки, като мрежова грешка!

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

      Проверка на статичен тип

      Javascript не е въведен език и много от проблемите възникват поради грешни типове.

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

      Бонус съвет

      Уверете се, че вашето уеб приложение може да се управлява изцяло само с клавиатурата,

      • WebAIM говори за достъпност на клавиатурата

      Благодаря ви за четенето!

      Моля, оставете коментари, ако имате някакви предложения или предложения или искате да добавите точка / и или забележите някаква грешка / печатни грешки!

      Послепис Ако сте намерили тази статия за полезна, ръкопляскайте! [чувства се възнаграждаваща и дава мотивация да продължа да пиша].

      За повече информация,

      вижте Ръководството за разширени данни в официалния наръчник, https://reactjs.org/docs/getting-started.html

      dupliceopportunita.com © 2020