2019. gada ReactJS labākā prakse

[atjaunināt, 2019. gada 22. maijā] - sarakstam pievienojiet vēl vienu labāko praksi. Skatīt zemāk.

[atjauninājums, 2019. gada 19. maijs] - mēs pievienojām jaunu rakstu par Redux un Redux-Thunk. Vienkārši izskaidrots ar daudziem piemēriem.

[atjauninājums, 2019. gada 23. jūlijs] - Daudzu pieprasījumu dēļ mēs pievienosim jaunu rakstu par ReactJS ANTIpatterns. Saite tiks ievietota šeit. Lūdzu, atbalstiet ar aplaudēšanu. Paldies!

1. Lūdzu, laipni lūdzam, ReactJS

Pēdējo piecu gadu laikā ReactJS ir strauji palielinājusies savu popularitāti un līdz 2018. gada sākumam tā kļuva populārāka nekā jQuery, vismaz Google meklēšanas ziņā. Mēs nesalīdzināsim instrumentus pēc to pieprasījuma meklētājprogrammās; tomēr tas dod mums skaidru izpratni par to, ka ReactJS bibliotēka noteikti ir populāra. Ņemot to vērā, runāsim par ReactJS izmantošanu, lai izveidotu labākas Front-End lietotnes.

Mums ļoti patīk redzēt, kā jūs izbaudat mūsu rakstus. Tātad, ja šis ieraksts jums šķiet noderīgs, lūdzu, pieskarieties pogai zemāk :)

Kas padara ReactJS tik populāru, papildus tam, ka Facebook to izveidoja? Mēs domājam, ka tas ir saistīts ar to, ka ReactJS ir vienkārši strādāt. To ir viegli iemācīties, un tas ir optimizēts veiktspējai, izmantojot savu virtuālo DOM. Īstenojot virtuālo DOM, ReactJS piedāvā renderēšanas motoru veidu, kā ātri atjaunot tikai tos elementus, kuri ir jāatjaunina. Tā rezultātā ReactJS izstrādātāji iegūst ātri un patīkami lietotnes.

ReactJS ir bibliotēka, kas lieto JavaScript, lai izveidotu lietotnes. Lai sāktu veidot lietotnes ReactJS, jums jāapgūst tās API un jāzina JavaScript. Mūsdienās JavaScript, iespējams, ir vispopulārākā programmēšanas valoda. ReactJS arī ļauj izstrādātājiem modelēt un aprakstīt lietotni lietotāja saskarnes komponentos. Tātad jūs vienkārši sakāt, kas jādara, un ReactJS zina, kā to izdarīt.

Piedāvājam dažas tendences Google pēdējos piecos gados:

Viens no galvenajiem ReactJS jēdzieniem ir tas, ka jūs izveidojat atkārtoti lietojamus, saliedētus komponentus, kurus var salikt kopā un veidot lietotni. Katram komponentam var būt savs stāvoklis, ja vien tas nav bez stāvokļa (vairāk par to vēlāk). ReactJS apkopo visus jūsu komponentus vienā spainī un piemēro dažas optimizācijas metodes, piemēram, virtuālo DOM, lai efektīvi padarītu lietotni jūsu pārlūkprogrammā.

Sāksim noskaidrot, kas ir komponents un kas tas nav. Komponents ir patstāvīga, neatkarīga lietotāja saskarnes sastāvdaļa. Katrs komponents var iegult citus komponentus, kur katram ir savs stāvoklis un API. Parasti ar komponentiem saistītais kods jums jāglabā vienā noteiktā mapē. Turot visus komponentus visus failus vienā mapē, varat izveidot atkārtoti lietojamus komponentus, lai tos varētu izmantot citās lietotnēs.

2. ReactJS komponentu veidi

Ir četri galvenie ReactJS komponentu veidi:

  1. Pilnvērtīgi vai klases komponenti
  2. Komponenti bez stāvokļa vai funkcijām
  3. Prezentācijas (vai augstas pasūtījuma) sastāvdaļas
  4. Konteineru komponenti

Kreisajā pusē ir parādīta jūsu komponentu koka vēlamā struktūra.

Pilnvērtīgi komponenti vai klases komponenti

Pilnvērtīgam komponentam ir tā stāvoklis un dati, kas saistīti ar stāvokli. Jūs varat pārsūtīt datus šāda veida komponentos, izmantojot stāvokļa vai rekvizītu objektus. Pilnvērtīgus komponentus ir grūtāk atbalstīt, jo tie saglabājas daži dati un var mainīt lietotnes vispārējo stāvokli. Pilnvērtīgi komponenti arī parasti ir klases komponenti, kuriem ir konstruktors (tiek uzskatīts, ka labākā prakse ir noteikt sava komponenta stāvokli konstruktorā).

Šeit ir valsts pilna, klases balstīta ReactJS komponenta piemērs:

Butaforijas ir nemainīgas un ir vienā virzienā saistītas ar stāvokli, un tāpēc jūs tos nevarat mainīt savā komponentā. Jūs izmantojat rekvizītus, lai iestatītu komponenta stāvokli un padarītu tā lietotāja saskarni. Mēģinot mainīt komponenta rekvizītus, jūs saņemsit tipa kļūdu.

Stāvoklis ir objekts, kas ir pakļauts komponentam. Valsts darbības joma ir ierobežota tikai tajā komponentā, kurā tā tiek deklarēta. Komponenti var inicializēt stāvokli un nodot to citam komponentam. Mēs varam deklarēt stāvokli divos veidos, izmantojot konstruktoru vai deklarējot valsts īpašumu. Ar otro gadījumu tas ir tikai sintaktiskais cukurs, un transplantāts (piemēram, Bābele) pārvērtīs jūsu valsts īpašuma deklarāciju par konstruktoru jums zem pārsega. Bezkomponentu vai uz funkcijām balstīti komponenti, kā arī tas, kas React Hooks ir komponentiem, kuru pamatā ir Funkcijas, ir tikai vienkāršas JavaScript funkcijas. Komponenti, kas balstīti uz funkcijām, atdod ReactJS elementu vai kolekciju, kas var būt “daļējs komponents”, piemēram, <> ... vai pilnībā uz funkcijām balstīts komponents ar loģiku un iegultiem komponentiem. Tā kā jūs nevarat izmantot konstruktoru funkcionālā komponentā (labi, ka jūs to darāt, kopš ReactJS v16.8), jūs nevarat padarīt savu komponentu par pilnu. Tas ir bez stāvokļa, jo jūs nevarat saglabāt datus par šāda veida komponentiem. Visbiežāk nododat rekvizītus funkcijai balstītam komponentam, lai padarītu tā lietotāja saskarni. Šeit ir piemērs bezreaģējošam, uz funkcijām balstītam ReactJS komponentam:

Raugoties no veiktspējas viedokļa, praktiski nav atšķirības starp klases balstītu komponentu un funkciju balstītu komponentu izmantošanu. ReactJS renderēšanas mehānisms ir pietiekami gudrs, lai to optimizētu mums.

Ar funkcijām balstītus komponentus ir vieglāk strādāt, un tos ir ērtāk pārbaudīt. Tāpēc ReactJS izstrādātāju kopiena mudinās jūs rakstīt uz funkcijām balstītus komponentus, nevis klases komponentus. Komponentiem, kas nesatur funkcijas, ir daži ierobežojumi, un būtībā tiem ir jābūt vienai globālai vietnei, lai pārvaldītu stāvokli. Tas atšķiras no ReactJS rakstīšanas komponentu paradigmas (sīkāku informāciju skatīt zemāk).

Lai izstrādātāji varētu rakstīt pilnus, uz funkcijām balstītus komponentus un vienlaikus dotu iespēju izmantot stāvokļa un komponentu dzīves cikla metodes, React v16.8 pievienoja jaunu funkciju ar nosaukumu React Hooks. Būtībā React Hooks ir mēģinājums noņemt uz klases balstītus komponentus. Izmantojot React Hooks, jūs varat rakstīt uz funkcijām pamatotus komponentus, neizmantojot klases. Droši vien mēs kādreiz nākotnē redzēsim uz klasi balstītus komponentus, izmantojot Āķus.

React Hooks mērķis ir arī vienkāršot lietojumprogrammu dizainu, izvairoties no komponentiem, kuriem nav vai nav vajadzīgi konstruktori, kaut arī tie tiek deklarēti kā klases. Visbiežāk jūs strādājat ar komponentiem bez stāvokļa, ja domājat par savas lietotnes ideālo dizainu. Veidojot ReactJS lietotnes saviem klientiem, mēs parasti izmantojam plānu kārtu starp mūsu komponentu attēlojumu un lietojumprogrammas loģiku. Tas ļauj atdalīt komponenta vizuālo attēlojumu no tā izturēšanās.

3. Datu samazināšana, darbību palielināšana

Kāds ir dizaina modelis «Data Down, Actions Up»? Būtībā tas nozīmē, ka jums ir komponents ar augstu pasūtījumu (HOC - skatīt paskaidrojumu zemāk), kurš pieņem datus savos rekvizītos un nodod šos datus savā skatā vai ligzdotos komponentos. Lai mijiedarbotos ar komponentu, lietotāji aktivizē darbības, piemēram, nospiežot pogu, un komponents reaģē uz šo mijiedarbību, izstarojot notikumus. Tā teikt, tas izraisa notikumu augšup pretējā virzienā nekā tas, kā šie dati tika nodoti.

Šie notikumi vai darbības tiek nodotas vecāku komponentei. Sākotnējais komponents aktivizē vēl vienu darbību, kas maina globālo lietojuma stāvokli.

4. Augstas kārtas komponents

Komponents ar augstu pasūtījumu (vai HOC) būtībā ir dizaina modelis, kas pazīstams arī kā dekorētāja raksts. ReactJS HOC ir komponents, kas iesaiņo citu komponentu, pievienojot papildu funkcionalitāti vai papildu īpašības. Tas ļauj abstrahēties no dažām parasti izmantotām loģikām un saglabā jūsu kodu DRY. Tas ir veids, kā jūs sadalāt sarežģītu komponentu struktūru starp citiem ReactJS komponentiem un veids, kā atsaistīt lietojumprogrammas loģiku un lietotāja saskarni. Piemēram, konteinera komponentu varat izmantot kā HOC savam prezentācijas pogu komponentam.

Šeit ir HOC ReactJS komponenta piemērs:

5. Tvertnes komponenti

Tvertnes komponentiem, no otras puses, ir loģika iestatīt stāvokli vai tām ir funkcijas, lai izstarotu notikumus līdz pat vecāku komponentam. Vispārīgais īkšķa noteikums ir saglabāt jūsu komponentu pēc iespējas vienkāršāku, paturot prātā vienas atbildības principa principa dizainu, kas būtībā nozīmē, ka jūsu komponentam ir jādara viena lieta, bet tas jādara labi. Visbiežāk šāda veida komponenti ir HOC, kas satur dažus prezentācijas komponentus. Prezentācijas komponenti Vienkāršu komponentu rakstīšana var samazināt jūsu lietojumprogrammas vispārējo sarežģītību. Šeit tiek izmantoti prezentācijas komponenti. Šīm sastāvdaļām jābūt minimālām vai bez loģikas. Prezentācijas komponenti pieņem datus un izstaro notikumus atzvanīšanai, ko viņi saņem kā daļu no tā rekvizītiem. Būtībā šāda veida komponenti atveido lietotāja saskarni un izpilda funkciju, kas tai tika nodota, kad notiek kāda darbība tās saskarnē. Šis komponenta tips ir celtniecības bloks, un to dažreiz sauc par zemas kārtas komponentu (vai LOC).

6. Labākās prakses saraksts

  • [Atjaunināt 2019. gada 22. maijā] - Lietojot ReduxJS, sadaliet savu reduktora kodu mazākās metodēs, lai izvairītos no milzīga JSON jūsu reduktorā.
  • Apsveriet iespēju izmantot TypeScript savās lietotnēs, ja jūs to vēl nedara.
  • Izmantojiet izveidošanas-reaģēšanas lietotnes ģeneratoru, lai sāktu lietot savu ReactJS lietotni.
  • Saglabājiet savu kodu DRY. Neatkārtojiet sevi, taču atcerieties, ka koda dublikāts NAV vienmēr slikta lieta.
  • Izvairieties no lielām klasēm, metodēm vai komponentiem, ieskaitot reduktorus.
  • Izmantojiet stingrākus pārvaldniekus, lai pārvaldītu lietojumprogrammu stāvokli, piemēram, Redux.
  • Izmantojiet notikumu sinhronizatoru, piemēram, Redux-Thunk, mijiedarbībai ar jūsu gala API.
  • Izvairieties no pārāk daudz atribūtu vai argumentu nodošanas. Ierobežojiet sevi ar pieciem aksesuāriem, kurus nodod savā komponentā.
  • Izmantojiet ReactJS defaultProps un ReactJS propTypes.
  • Izmantojiet starpliku, sadaliet pārāk garās līnijas.
  • Saglabājiet pats savu jslint konfigurācijas failu.
  • Vienmēr izmantojiet atkarības pārvaldnieku ar bloķēšanas failu, piemēram, NPM vai dziju.
  • Pārbaudiet savu parasti pieejamo kodu, kodu, kas ir sarežģīts un pakļauts kļūdām.
  • Uzrakstiet vairāk testus, kas ar nelielu piepūli nodrošina lielāku koda pārklājumu, un testa kods, lai nodrošinātu tā pareizu darbību.
  • Katru reizi, kad atrodat kļūdu, pārliecinieties, ka vispirms esat uzrakstījis pārbaudi.
  • Izmantojiet uz funkcijām balstītus komponentus, sākot lietot React Hooks, jaunu ReactJS veidu, kā izveidot komponentus pilnā stāvoklī.
  • Izmantojiet ES6 destrukturēšanu jūsu butaforijai.
  • Izmantojiet nosacītu renderēšanu.
  • Lietotājs `map ()`, lai apkopotu un atveidotu komponentu kolekcijas.
  • Izmantojiet daļējas sastāvdaļas, piemēram, `<>`… ``
  • Nosauciet notikumu apstrādātājus ar roktura prefiksiem, piemēram, `handleClick ()` vai` handleUpdate ()`.
  • Izmantojiet `onChange`, lai kontrolētu ievadus, piemēram,` onChange = {this.handleInputChange ()} `.
  • Izmantojiet JEST, lai pārbaudītu savu ReactJS kodu.

Mēs esam pieminējuši notikumu sinhronizatorus, piemēram, Redux-Thunk. ReactJS v16.3 ieviesa jaunu funkciju ar nosaukumu React Context API. Daļa no tā funkcionalitātes ir imitēt redux-thunk funkcionalitāti un sinhronizēt notikumus ar ReactJS līdzekļiem. Šī ir funkcija, kas ir ļoti pieprasīta, jo gandrīz jebkura ReactJS lietojumprogramma sarunājas, lai atbalstītu API, un tai ir jāsinhronizē pieprasījumi un notikumi. Mēs uzraudzīsim šo API un informēsim jūs par atjauninājumiem.

Šis ir noklusējumaProps un propTypes izmantošanas piemērs:

7. Secinājums

Mēs ceram, ka šis raksts nedaudz atspoguļo ReactJS labāko praksi un modeļus, kas ir ļoti populāri 2019. gadā. Kā prēmiju skatiet citu rakstu zemāk, arī jūs varat reģistrēties bezmaksas atjauninājumiem un jauniem mācību materiāliem par ReactJS, lai saņemtu svaigus atjauninājumus. Ir vēl viena lieta…

Mums tiešām ir nepieciešams jūsu klans! Ja jums šķiet, ka šī ziņa ir noderīga, lūdzu, pieskarieties pogai zemāk :) Šeit ir mūsu pirmais . Tu esi lielisks!

.

Bonusa materiāls: Šeit ir mūsu nesenais raksts par Redux un Redux-Thunk. Mēs izskaidrosim, kā divi darbojas kopā.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188