10 парад, як стварыць свой код ReactJS як PRO

Многія з нас, распрацоўшчыкі інтэрфейсу, распрацоўшчыкі Js, а таксама спагадныя распрацоўшчыкі, працуюць у камандах, якія ўключаюць у сябе распрацоўшчыкаў з рознымі навыкамі. Лепшы спосаб палепшыць наш код - ПРАВЕРГАЦЬ ДОБРЫ КАДАЛЬНАСЦЬ ЯКАСЦІ - але не ў тым, каб мы праверылі, ці працуюць усе меркаванні, але і як нашы калегі дасягнулі гэтага выніку.

Чаму? Гэта лёгка - калі ў вашай камандзе да 5 чалавек, лёгка спытаць, як гэта працуе. Але калі ваша каманда вельмі вялікая альбо ёсць шмат дынамічных змяненняў, гэты высокі якасны код і іншыя распрацоўшчыкі дапамогуць нам зразумець гэта і, вядома, вы можаце адчуць сябе прафесіяналам

Я выкарыстаў 10 найлепшых практык, якія дапамагаюць мне і маёй камандзе палепшыць якасць кода ў нашых праектах React Гэтыя парады звычайна заснаваныя на функцыянальнасці ES6, але выкарыстоўваюцца не заўсёды. Знайдзіце іх і выкарыстоўвайце таксама !!

1. Кампаненты класа функцыянальных кампанентаў VS

Мы ўсе вельмі рады, што ў ES6 была рэалізавана падтрымка заняткаў - мне гэта падабаецца! У рэакцыі мы можам стварыць кампанент, пашырыўшы просты клас "React.Component". Там у нас ёсць простыя метады кіравання дзяржавай, падтрымка кампанентаў падзей і г.д. Часам гэта занадта шмат, што нам трэба, але мы ведаем, што можам гэтым скарыстацца.

import React, {Component} з 'рэагаваць'
Клас MyComponent пашырае кампанент {render () {return Прывітанне {this.props.text} }}

Але, развіваючы рэакцыі, многія распрацоўшчыкі забываюць, як мы можам лёгка стварыць кампанент, выкарыстоўваючы функцыянальны кампанент, які можа быць функцыяй з адным параметрам - рэквізіт.

імпарт рэагуе з 'рэагаваць'
const MyComponent = (рэквізіт) => Прывітанне {props.text}

Аднак выкарыстанне гэтых двух кампанентаў выглядае аднолькава!

Добра - чаму я павінен выкарыстоўваць функцыянальныя кампаненты? Таму што там нашмат прасцей, чым пашыраны клас. Памятаеце, што мы выкарыстоўваем React і іншую рэактыўную аснову, калі мы думаем пра выкарыстанне памяці. Гэтыя рамкі робяць віртуальны DOM без лішніх рэквізітаў і метадаў, каб зрабіць іх прасцей, хутчэй кіраваць і менш месца для рэзервацыі. Таму, калі мы думаем пра аптымізацыю, мы павінны думаць пра гэтую розніцу.

Добра - калі мы маглі б выкарыстоўваць кампаненты класа і калі функцыянальныя кампаненты? Правілы вельмі простыя - КАЛІ ВЫ ВЫКАРЫСТАЦЬ НЕЧАГА, ШТО НЯМА ФУНКЦЫЯНАЛЬНЫХ КОМПОНЕНТАЎ - ВЫКАРЫСТАЙТЕ КЛАСНЫЯ КОМПОНЕНТЫ!

Даволі лёгка? Так Пачніце з напісання кампанентаў з эскізных функцыянальных кампанентаў. Калі вы выявіце, што вы выкарыстоўваеце нешта накшталт статусу альбо вам трэба заўважыць змены вашага кампанента, напрыклад, компонентWillMount () і г.д., вы можаце пераўтварыць яго ў клас кампанента.

Калі вы думаеце пра тое, які кампанент вы выкарыстоўваеце, вы будзеце як прафесіянал!

2. Калі выказванні ў шаблоне кампанента

Паглядзіце ніжэй ... Ці ведаеце вы, што здарылася з гэтым метадам заявы if?

{a> b? : null}

Калі ўмова супярэчлівая, "React" усталёўваецца ў нуль. Хм ... гэта нармальна - я не разумею, таму тут няма ніякіх праблем ... НЕ !!!

Гэты нуль па-ранейшаму існуе ў вашым DOM. Так што калі вы зніміце ўсіх дзяцей са свайго спісу альбо хочаце патэлефанаваць дзецям, гэта будзе лічыцца нуль !!!

Рашэнне?

{a> b && }

Так проста, так элегантна. Як прафесіянал!

3. Функцыянальная прывязка

Я люблю IT6! Я люблю стрэлкі FUNCTIONS !!! Але як толькі вы зразумееце, як яны сапраўды працуюць, выкарыстаць іх у адказ вельмі проста. Больш пра яго (тут). У вельмі кароткай функцыі стрэлкі яны атрымліваюць маску ад сваіх непасрэдных бацькоў, пра што было заяўлена.

Чаму я кажу пра гэта спасылкай на функцыянальныя сувязі? Таму што ёсць вельмі просты трук, каб зрабіць свой код чысцейшым. Стандартная функцыя прывязкі да падзеі выглядае так:

Клас MyComponent пашырае кампаненты {канструктар (рэквізіт) {супер (рэквізіт)
this.clickHander = this.clickHander.bind (гэта)}
clickHander (e) {e.preventDefault (); папярэджанне ("прывітанне" + this.props.text)}
render () {вяртанне }}

Мы аб'яўляем функцыю clickHandler, але галоўны кантэкст іх (гэта) - кнопка, на якую мы націскаем. Такім чынам, калі мы хочам звязаць гэта са сваім класам, мы павінны звязаць гэта з канструктарам.

Ці магу я зрабіць гэта прасцей? Упэўнены !!! Функцыя стрэлкі дае абгрунтаванасць вашага непасрэднага бацькі, які быў абвешчаны (копія зверху).

Клас MyComponent пашырае кампанент {clickHander = (e) => {папярэджанне ("Прывітанне" + this.props.text)}
render () {вяртанне }}

Лягчэй, хутчэй і выглядае на профі!

** ВАЖНА **

Калі вы хочаце выкарыстоўваць гэтую структуру, майце на ўвазе, што гэта эксперыментальная структура на дадзены момант. Такім чынам, мы павінны перакласці іх з babel, выкарыстоўваючы ўласцівасць класа пераўтварэнняў, што з'яўляецца стандартным у create-react-app. Даведка тут

4. Кароткі рэквізіт і стан

Іншая рэч, якую мы можам выкарыстоўваць з ES6, але мы забыліся - перабудова. У многіх аглядах кода мы бачым, што вялікія прадметы для дробных дэталяў руйнуюцца.

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

Гэта занадта доўгае і не гнуткае рашэнне. Існуе вельмі просты спосаб знішчыць гэтую разумную сістэму.

... var {шырыня, вышыня, колер} = this.props.myObject; ...

Усё проста, калі мы хочам мець зменную з такім жа імем, як ключ аб'екта.

Як мы можам з гэтым рэагаваць?

import React, {Component} з 'рэагаваць'
Клас MyComponent пашырае кампанент {render () {пакінуць {імя, узрост} = this.props return Мяне завуць {імя}. Мне {ўзрост} гадоў. }}

альбо з функцыянальным кампанентам

імпарт рэагуе з 'рэагаваць'
const MyComponent = ({імя, узрост}) => Мяне завуць {імя}. Мне {ўзрост} гадоў.

Яшчэ адзін прыклад? Калі вы выкарыстоўваеце вялікую структуру рэквізіту або стану.

import React, {Component} з 'рэагаваць'
Клас MyComponent пашырае кампанент {state = {Team: [{Асоба: {Асноўная інфармацыя: {Імя: 'Michal', Узрост: 27}}}]}
render () {пакіньце {імя, узрост} = this.props.team [0] .person.basicInfo вярнуцца Мяне завуць {імя}. Мне {ўзрост} гадоў. }}

Лёгка? Лёгка! І выглядае як PRO;)

5. Стылі падзелу

Вельмі хуткі савет - АДДЗЕЛНЫЯ СТЫЛЫ !!! : D

Але ў нас ёсць дзве сітуацыі:

  1. Мы можам выкарыстоўваць знешнія стылі з файлаў (.css, .scss)
  2. Мы выкарыстоўваем некаторыя кампаненты, якія выкарыстоўваюць іх архітэктурны стыль, але яны выкарыстоўваюць толькі радкі накшталт material-ui

Першая сітуацыя вельмі простая, і ўсё!

Аднак другая сітуацыя крыху складаная, і я хачу паказаць вам некаторыя рашэнні:

# 1. Конкурс са стылямі

import React, {Component} з 'рэагаваць'
const styles = {абзац: {'fontSize': '10px', 'color': '# ff0000'}}
Клас MyComponent пашырае кампанент {render () {return ( Гэта мой першы тэкст Гэта мой другі тэкст )}}

# 2. CSS модулі

Гэта добрая ідэя, каб загрузіць у свой код CSS-аб'екты і спасылкі для класаў, якія існуюць у вашым CSS-файле.

import React, {Component} з класаў 'react' from './style.css' import
Клас MyComponent пашырае кампанент {render () {return ( Гэта мой першы тэкст Гэта мой другі тэкст )}}

Кароткае відэа для падрыхтоўкі вашага вэб-пакета да CSS

І памятайце: калі вы зможаце аддзяліць файлы і палегчыць рэдагаванне, працуйце як прафесіянал!

6. Залежнасць ад навакольнага асяроддзя

Мы любім нешта складаць, але нічога не хацелі рабіць для вытворчай версіі. Як схаваць свае фрагменты альбо нешта, што даступна толькі распрацоўшчыкам альбо ў рэжыме распрацоўкі?

Выкарыстоўвайце ВАРЫЯЛЬНІЦТВА ЗЯМЛЕННЯ - дадатковая зменная, якую вы можаце прызначыць пры запуску або стварэнні праекта. Калі вы запусціце дзеянне з тэрмінала, вы можаце дадаць дадатковыя зменныя, якія перадаюцца з вузла ў дадатак у process.env. Тады вы можаце перадаць усё.

Напр. MY_VARIABLE = "Добры дзень, свет!" npm запусціць

Тады мы павінны бачыць наша значэнне ў process.env.MY_VARIABLE.

Пры выкарыстанні прыкладання create-react у вас ёсць зменная зборка, як NODE_ENV, якая вяртае рэжым зборкі, такі як распрацоўка, вытворчасць або тэставанне. І ўсё для асноўнага выкарыстання.

const isDebug = process.env.NODE_ENV === 'распрацоўка'

Як вы выкарыстоўваеце гэта на практыцы?

import React, {Component} з 'рэагаваць'
const isDebug = process.env.NODE_ENV === 'распрацоўка'
Клас MyComponent пашырае кампанент {render () {return ( Гэта мой публічны тэкст {isDebug && Гэта мой тэкст распрацоўкі } )}}

Я не ўпэўнены, што гэта PRO, але вы можаце даць ENV VARIABLE нейкую экалагічна важную інфармацыю, напрыклад, каранёвы URL API альбо адрас вашага праекта і г.д.

** Важна **

Не забывайце, што той, хто хоча расшыфраваць ваш зыходны код, можа распазнаць вашыя залежнасці.

7. Успомніце спосабы праверкі кампанентаў

Гэта даволі лёгка зразумець - калі вы думаеце пра тэставанне прыкладання, вы, верагодна, захочаце выкарыстоўваць Jest для тэставання. Аднак, калі вы падключыце свае кампаненты да бэкэнда, напрыклад, Apollo (для GraphQL), альбо да машыны стану, напрыклад Redux або іншай HOC, вы павінны прыняць да ўвагі, што гэтыя пашырэнні недаступныя для простага тэставання кампанентаў. І гэта нармальна. Калі вы хочаце праверыць свой кампанент SINGLE, проста праверце яго функцыянальнасць. Праверце, ці падтрымліваюцца ўваходныя апоры і дзеянні кампанента.

Як вы рыхтуеце кампаненты да тэставання?

Калі ў вас няма HOC, экспартуйце наступным чынам:

import React, {Component} з 'рэагаваць'
Клас MyComponent пашырае кампанент {render () {пакінуць {імя, узрост} = this.props return Мяне завуць {імя}. Мне {ўзрост} гадоў. }}
Экспарт стандартнага MyComponent

Аднак, калі вы хочаце выкарыстоўваць HOC, выкарыстоўвайце гэты ўзор:

import React, {Component} з 'рэагаваць'
Клас экспарту MyComponent пашырае кампанент {render () {пакінуць {імя, узрост} = return.props return Мяне завуць {імя}. Мне {ўзрост} гадоў. }}
Экспарт стандартнай myHocFunction (MyComponent)

Чаму? Таму што калі вы хочаце імпартаваць кампанент у іншы дакумент з дапамогай HOC, выкарыстоўвайце:

імпартаваць MyComponent з './components/MyComponent'

але ў тэстах можна выкарыстоўваць

Імпарт {MyComponent} з './components/MyComponent'

Просты код, простае рашэнне, але мноства варыянтаў - вядома, мы прафесіяналы;)

8. Устаўце памочнікі

Вельмі, вельмі простая і важная рэч. Часам вы карыстаецеся аднолькавымі функцыямі альбо маеце аднолькавыя правілы для многіх кампанентаў. Не трэба дубляваць свой код. Проста аддзяліце дапаможныя функцыі ад іншага файла і змесціце іх у глабальны каталог даведкі:

Грамадскі памочнік src globalals.js модулі памочніка карыстальніка index.js UserList.js User.js app.js

** Важна ** Калі вы дубліруеце свой код, вы павінны палепшыць яго!

Падзел файлаў - лепшы спосаб стаць прафесіяналам!

9. Рэагуйце на фрагменты

Вы падрыхтавалі свой лепшы макет, HTML-разметка самая лепшая, усе лічаць, што гэта выглядае прыгожа ... ДЗЕМНА, проста адказвайце на рэалізацыю ... Загаловак ... выглядае ідэальна ... Jumbotron ... дзівосна ... пачакайце ... У мяне ёсць раздзел, які не парушаны ... О, НЕ ... рэагуйце ... БАЛО!

Гэта была праблема, калі вы хацелі стварыць кампанент без абгорткі. Доўгі час мы павінны спакаваць усё:

Клас MyComponent пашырае кампанент {render () {return ( Гэта мой першы тэкст Гэта мой другі тэкст )}}

бо рэакцыя не дазволіла нам зрабіць гэта самастойна. чаму - не выкарыстоўваўся, калі ў кожнага элемента ёсць свой унікальны ключ, які дазваляе вызначыць, якая частка DOM з'яўляецца яго кампанентам.

BUT React дадала новую функцыю пад назвай "React Fragments", якая дазваляе стварыць кампанент, які аб'ядноўвае шмат элементаў без неабходнасці абкручваць DOM. Ён працуе проста як абгортку дзівак, але мы будзем выкарыстоўваць іх замест гэтага -Інструкцыя альбо кароткая версія <>

Вых.

Клас MyComponent пашырае кампанент {render () {return ( Гэта мой першы тэкст Гэта мой другі тэкст )}}

альбо

Клас MyComponent пашырае кампанент {render () {return (<> Гэта мой першы тэкст Гэта мой другі тэкст )}}

Дзівосна - вы падобны на прафесіянала, прачытайце ўвесь артыкул з дакументацыі

10. Прафілактыкі выкарыстоўваюць тыпы падстаўкі і стандартныя рэквізіты

Калі вы PRO, падумайце, што вам патрэбныя кампаненты. Чаму я павінен выкарыстоўваць PropTypes?

Падчас распрацоўкі вы можаце быць упэўнены, што вашы іншыя кампаненты перадаюць ім патрэбнае значэнне. Калі вы хочаце выкарыстоўваць радок, у рэквізіце павінна быць радок, напрыклад, Вы можаце рабіць рэчы, характэрныя для кампанентаў. Даданне defaultProps, калі ваш propType не патрабуецца, абараняе вас ад забыцця дадаць рэквізіт да кампанента.

import React, {Component} з 'react' Імпартаваць PropTypes з 'тыпаў prop'
Клас MyComponent пашырае кампанент {render () {return Прывітанне {this.props.text.toLocaleUpperCase ()} }}
MyComponent.propTypes = {Тэкст: PropTypes.string}
MyComponent.defaultProps = {Тэкст: 'Welt'}

І вы хочаце даведацца больш пра PropTypes - Поўная дакументацыя

Рэзюмэ

Як бачыце, гэтыя 10 саветаў вельмі лёгка рэалізаваць у вашым кодзе. Прачытайце яшчэ раз, дадайце рэакцыю, калі вам гэта падабаецца, і пакіньце каментары, калі нешта незразумела ці вы хочаце прачытаць нешта больш канкрэтнае! Удачы!