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

Много от нас, разработчици на frontend, js разработчици и също така реагират разработчици, работят в екипите, които включват разработчици с различно ниво на умения. Най-добрият метод за подобряване на нашия код е ДОБРО ПРЕГЛЕД НА КОД ЗА КАЧЕСТВО - но не че проверяваме дали всички мисли, че работи, но и как нашите колеги са дали този резултат - така че трябва да гарантираме чист код.

Защо? Това е просто - ако вашият екип наброява до 5 души, лесно е да попитате как работи. Но ако вашият екип е огромен или има много динамични промени, този код с добро качество помага на нас и на други разработчици да го разберем и разбира се можете да се почувствате като PRO; P

Взех 10 най-добри практики, които помагат на мен и на моя екип да подобря качеството на кода в нашите Реактивни проекти. Тези съвети обикновено се базират на функционалността на ES6, но не ги използваме винаги. Потърсете ги и не се колебайте да го използвате и !!

1. Компоненти от клас VS Функционални компоненти

Всички сме много щастливи, че в ES6 беше внедрена поддръжка на класа - обичам го! В реакция можем да направим компонент чрез разширяване на прост клас, наречен „React.Component“. Там имаме прости методи за управление на състоянието, поддръжка на събития за компоненти и т.н. Понякога е твърде много, от което се нуждаем, но знаем, че можем да го използваме.

import React, {Component} от „реагира“
клас MyComponent разширява Компонент {
  render () {
    върнете се 

Здравейте {this.props.text}

  } }

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

import React от 'реагира'
const MyComponent = (реквизит) => 

Здравейте {props.text}

Но използването на тези два компонента изглежда същото!

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

Добре - така че кога бихме могли да използваме класови компоненти и кога функционален компонент? Правилата са много лесни - КОГАТО ТРЯБВА ДА ИЗПОЛЗВАТЕ НЯКОЙ, КОЙТО ФУНКЦИОНАЛЕН КОМПОНЕНТ НЯМА - ИЗПОЛЗВАЙТЕ КЛАСЕН КОМПОНЕНТ!

Доста лесно? Да! Започнете да ви пишете компоненти от скица като функционален компонент. Когато видите, че трябва да използвате нещо като състояния или да откриете някои промени във вашия компонент - като компонентWillMount () и т.н., тогава можете да го трансформирате в клас компонент.

Когато мислите за това кой тип компоненти да използвате, вие ставате да бъдете PRO!

2. Израчения „Ако“ в шаблон на компонент

Вижте по-долу ... Знаете ли какво не е наред с този метод на if оператор?

{a> b? : null}

Ако състоянието е несъответстващо, React ще направи нула. Хм ... добре е - не виждам, така че няма проблем ... НЕ !!!

Тази нула все още съществува във вашия DOM, така че ако искате да вземете всички деца от списъка си или да се обадите за nth-деца, тази нула ще бъде отчетена !!!

Решение?

{a> b&& }

Толкова лесно, толкова елегантно. Като професионалист!

3. Обвързване на функция

ОБИЧАМ ES6! ОБИЧАМ СТРЕЛКИ ФУНКЦИИ !!! Но ако разбирате как наистина работят, тогава използването им в реагиране е много лесно. Повече за тях (Тук). Накратко - стрелката получава обхват от прекия си родител, че е имало деклариране.

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

клас MyComponent разширява Компонент {
  конструктор (подпори) {
    супер (подпори)
    this.clickHander = this.clickHander.bind (това)
  }
  clickHander (д) {
    e.preventDefault ();
    предупреждение („Здравейте“ + this.props.text)
  }
  render () {
    връщане  
  }
}

Ние декларираме clickHandler функцията, но основният контекст на тях (това) е бутона, който кликваме. Така че, ако искаме да свържем това като нашия клас, тогава трябва да го вържем в конструктор.

Мога ли да го улесня? РАЗБИРА СЕ!!! Чрез стрелка функция, тъй като получава обхват от директния им родител, че е имало деклариране (копие отгоре).

клас MyComponent разширява Компонент {
  clickHander = (e) => {
    предупреждение („Здравейте“ + this.props.text)
  }
 render () {
    връщане  
  }
}

По-лесно, по-бързо и изглежда като PRO !!!!

** ВАЖНО **

Ако искате да използвате тази структура - не забравяйте, че в момента тя е в експериментална, така че ние трябва да я преведем чрез babel, като използваме transform-class-свойството, което е стандартно в create-react-app. Референция тук

4. По-къси подпори и състояния

Друго нещо, което можем да използваме от ES6, но забравихме - разрушаване. В много рецензии на кодове можем да видим, че огромни предмети са разрушени за малки части.

...
var width = this.props.myObject.width,
    височина = this.props.myObject.height,
    color = this.props.myObject.color;
...

Това е твърде дълго и не е гъвкаво решение. Има много лесен начин за унищожаване на този по-умен.

...
var {width, height, color} = this.props.myObject;
...

Доста лесно, когато искаме да имаме променлива със същото име като ключ на обект.

Как можем да го използваме в реакция?

import React, {Component} от „реагира“
клас MyComponent разширява Компонент {
  render () {
    нека {name, age} = this.props
    връщане 

Моето име е {name}. Аз съм на възраст.

  } }

или с функционален компонент

import React от 'реагира'
const MyComponent = ({име, възраст}) => 

Моето име е {name}. Аз съм на възраст.

Друг пример? Когато използвате голяма структура на реквизити или състояния.

import React, {Component} от „реагира“
клас MyComponent разширява Компонент {
  състояние = {
    екип: [
      {
        лице: {
          основна информация: {
            име: „Михал“,
            възраст: 27
          }
        }
      }
    ]
  }
  render () {
    нека {name, age} = this.props.team [0] .person.basicInfo
    
    връщане 

Моето име е {name}. Аз съм на възраст.

  } }

Лесно? Лесно! И изглежда като PRO;)

5. Разделяне на стилове

Много бърз съвет - отделни стилове !!! :Д

Но имаме две ситуации:

  1. Можем да използваме външни стилове от файлове (.css, .scss)
  2. Ние използваме някои компоненти, които използват техните стилове на изграждане, но те използват инйлини само като material-ui

Първата ситуация е доста лесна, сложете се на webpack sass и stiller loader и това е всичко!

Но втората ситуация е малко трудна и искам да ви покажа няколко решения:

# 1. Състезавайте се със стилове

import React, {Component} от „реагира“
const стилове = {
  параграф: {
    "FONTSIZE": "10px"
    "Цвят": "# ff0000"
  }
}
клас MyComponent разширява Компонент {
  render () {
    връщане (
      
        

Това е първият ми текст

        

Това е вторият ми текст

           )   } }

# 2. CSS модули

Хубаво е да зареждате в кода си CSS като обект и препратка към класа, който съществува във вашия css файл.

import React, {Component} от „реагира“
импортиране на класове от './style.css'
клас MyComponent разширява Компонент {
  render () {
    връщане (
      
        

Това е първият ми текст

        

Това е вторият ми текст

           )   } }

Бързо видео как да ви подготвим уебпакет за CSS

И не забравяйте - ако можете да разделите вашите файлове и да улесните редактирането им, тогава работите като PRO!

6. Зависимости на средата

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

Използвайте ПРОМЯНА НА ОКОЛНАТА СРЕДА - допълнителна променлива, която можете да зададете по време на стартиране или изграждане на проекта. Когато стартирате каквото и да е действие от терминал, тогава можете да поставите допълнителни променливи, които се избутват към приложението от възел в process.env, след което можете да натиснете всичко.

напр. MY_VARIABLE = "Здравей, свят!" npm стартиране

След това в process.env.MY_VARIABLE трябва да видим нашата стойност.

Ако използвате create-react-app, тогава имате изградена променлива като NODE_ENV, която връща режима на вашата сборка като разработка, производство или тест. И всичко това за основно използване.

const isDebug = process.env.NODE_ENV === 'развитие'

Как да го използваме на практика?

import React, {Component} от „реагира“
const isDebug = process.env.NODE_ENV === 'развитие'
клас MyComponent разширява Компонент {
  render () {
    връщане (
      
        

Това е моят публичен текст

        {isDebug &&

Това е моят текст за разработка

}            )   } }

Не съм сигурен дали е като PRO, но можете да предавате ENV VARIABLE информация, чувствителна към околната среда, като например root root URL или API на проекта и т.н.

** Важно **

Не забравяйте, че ако някой иска да ви декодира изходния код, той може да ви види зависимости.

7. Помнете за възможностите за тестване на компоненти

Това е доста лесно да се разбере - ако мислите за тестване, вие реагирате на приложението, тогава вероятно искате да използвате Jest за тестване. Но трябва да запомните, че ако свържете вашите компоненти с някакъв бекенд като Apollo (за GraphQL) или държавна машина като Redux или друга HOC, тогава трябва да запомните, че тези разширения няма да бъдат достъпни при просто тестване на компоненти. И това е нормално Когато искате да тествате SINGLE компонента, тогава тествате само там функционалност - проверете дали входните реквизити и действията на компонента работят правилно.

И така, как да подготвите вашите компоненти за тестване?

Ако нямате HOC, експортирайте обикновено:

import React, {Component} от „реагира“
клас MyComponent разширява Компонент {
  render () {
    нека {name, age} = this.props
    връщане 

Моето име е {name}. Аз съм на възраст.

  } }
експортиране по подразбиране MyComponent

но ако искате да използвате някой HOC, използвайте този модел:

import React, {Component} от „реагира“
експортният клас MyComponent разширява Компонент {
  render () {
    нека {name, age} = this.props
    връщане 

Моето име е {name}. Аз съм на възраст.

  } }
експортиране по подразбиране myHocFunction (MyComponent)

Защо? Защото когато искате да импортирате в друг документ, който компонент с HOC, тогава използвате:

импортиране на MyComponent от „./components/MyComponent“

но в тестове можете да използвате

import {MyComponent} от './components/MyComponent'

Прост код, просто решение, но много възможности за използване - защото, разбира се, ние сме професионалист;)

8. Използвайте помощници

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

обществен
SRC
  помощници
    globals.js
  модули
    Потребители
      помощници
        index.js
      UserList.js
      User.js
  app.js

** Важно **
Ако дублирате кода си - трябва да го подобрите!

Разделянето на файлове е най-добрият начин да станете като PRO!

9. Реагирайте фрагменти

Подготвихте най-доброто си оформление, HTML маркирането е най-доброто, всяка мисъл изглежда доста… ARHHHH Учудващо, просто реагирайте на изпълнение… заглавието… изглежда перфектно… jumbotron… страхотно… изчакайте… Имам една секция, която не е увита… OH NO ... реагирайте ... МАЙНО!

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

клас MyComponent разширява Компонент {
  render () {
    връщане (
      
        

Това е първият ми текст

        

Това е вторият ми текст

           )   } }

защото реакцията не ни позволи да го оставим сам. защо - не се използва, ако всеки елемент вътре има собствен ключ uniq, за да може да разпознае коя част от DOM е неговият компонент.

НО React добави нова функция, наречена „React Fragments“, която ви позволява да изградите компонент, който групира много елементи, без да се увивате в DOM. Работи по същия начин като опаковане на div, но вместо div използваме оператор или кратка версия <>

Ex.

клас MyComponent разширява Компонент {
  render () {
    връщане (
      
        

Това е първият ми текст

        

Това е вторият ми текст

      
    )   } }

или

клас MyComponent разширява Компонент {
  render () {
    връщане (
      <>
        

Това е първият ми текст

        

Това е вторият ми текст

           )   } }

Удивително - вие сте като PRO прочетете пълната статия от документацията

10. PRO използват типове поддръжка и реквизити по подразбиране

Ако сте PRO, мислите за неща, от които са ви необходими компоненти. Защо трябва да използвам PropTypes?

По време на разработката можете да сте сигурни, че другите ви компоненти прехвърлят правилно стойността им. Ако искате да използвате низ, тогава в реквизита ви трябва да е низ, защото напр. можете да правите вътре специфични неща за низ. Добавянето на defaultProps, ако вашият propType не е необходим, ви защитава, че вие ​​/ или вашият проект колеж забравяте да добавите малко опора към компонента.

import React, {Component} от „реагира“
импортиране на PropTypes от 'prop-type'
клас MyComponent разширява Компонент {
  render () {
    return 

Здравейте {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  текст: PropTypes.string
}
MyComponent.defaultProps = {
  текст: „Свят“
}

И искате да знаете повече за PropTypes - Пълна документация

РЕЗЮМЕ

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