2019 ReactJS Best Practices

[update, 22 mei 2019] - Voeg nog een best practice toe aan de lijst. Zie hieronder.

[update, 19 mei 2019] - We hebben een nieuw artikel toegevoegd over Redux en Redux-Thunk. Eenvoudig uitgelegd met veel voorbeelden.

[update, 23 juli 2019] - Vanwege veel verzoeken zullen we een nieuw artikel over ReactJS ANTIpatterns toevoegen. De link wordt hier geplaatst. Ondersteuning met een klap. Dank je!

1. Welkom, ReactJS

De afgelopen vijf jaar is ReactJS snel in populariteit toegenomen en begin 2018 werd het populairder dan jQuery, althans in termen van Google-zoekopdrachten. We zullen geen tools vergelijken wat betreft hun vraag in de zoekmachines; dat geeft ons echter een duidelijk inzicht dat de ReactJS-bibliotheek absoluut populair is. Laten we het nu eens hebben over het gebruik van ReactJS om betere Front-End-apps te maken.

We genieten er echt van om je te zien genieten van onze geschriften. Dus als je dit bericht nuttig vindt, tik je hieronder op de -knop :)

Wat maakt ReactJS zo populair, naast het feit dat Facebook het heeft gemaakt? We denken dat dit komt doordat ReactJS eenvoudig is om mee te werken. Het is gemakkelijk te leren en is geoptimaliseerd voor prestaties door de virtuele DOM te gebruiken. Door virtuele DOM te implementeren, biedt ReactJS een rendering-engine een manier om snel alleen die elementen opnieuw te renderen die moeten worden bijgewerkt. Als gevolg hiervan krijgen ReactJS-ontwikkelaars apps die snel en prettig in gebruik zijn.

ReactJS is een bibliotheek die JavaScript gebruikt om apps te maken. Als u apps in ReactJS wilt gaan bouwen, moet u de API ervan leren kennen en JavaScript kennen. JavaScript is tegenwoordig waarschijnlijk de meest populaire programmeertaal. Met ReactJS kunnen ontwikkelaars ook een app in UI-componenten modelleren en beschrijven. Dus je zegt gewoon wat je moet doen en ReactJS weet hoe het moet.

Hier zijn enkele trends van Google over de afgelopen vijf jaar:

Een van de belangrijkste ReactJS-concepten is dat u herbruikbare, samenhangende componenten maakt die kunnen worden samengevoegd en een app vormen. Elke component kan zijn eigen status hebben, tenzij deze statusloos is (meer hierover later). ReactJS verzamelt al uw componenten in één bucket en past enkele optimalisatietechnieken toe, zoals virtuele DOM om de app efficiënt in uw browser weer te geven.

Laten we beginnen met het verduidelijken van wat een component is en wat het niet is. De component is een zelfvoorzienend, onafhankelijk onderdeel van de gebruikersinterface. Elke component kan andere componenten insluiten, waarbij elke component zijn status en API heeft. Volgens afspraak moet u uw componentgerelateerde code in één specifieke map bewaren. Door alle bestanden voor elke component in één map te bewaren, kunt u herbruikbare componenten maken zodat u ze in de andere apps kunt gebruiken.

2. Typen ReactJS-componenten

Er zijn vier hoofdtypen van ReactJS-componenten:

  1. Staatsvolle of op klassen gebaseerde componenten
  2. Staatloze of op functies gebaseerde componenten
  3. Presentatie (of hoge orde) componenten
  4. Container componenten

Een voorkeursstructuur van uw componentenboom wordt links weergegeven.

Volledige componenten of op klasse gebaseerde componenten

Een status-vol component heeft zijn status en gegevens geassocieerd met de status. U kunt gegevens binnen dit type component doorgeven via status- of rekwisietenobjecten. Componenten die volledig vol zijn, zijn ook moeilijker te ondersteunen omdat ze bepaalde gegevens bevatten en de algemene status van de app kunnen veranderen. Ook staat-volledige componenten zijn meestal op klasse gebaseerde componenten die een constructor hebben (het wordt als een best practice beschouwd om de status voor uw component in de constructor in te stellen).

Hier is een voorbeeld van de statusvolle, op klassen gebaseerde ReactJS-component:

Rekwisieten zijn onveranderlijk en zijn eenrichtingsgebonden aan een staat, en dit is waarom je ze niet kunt veranderen binnen je component. U gebruikt rekwisieten om een ​​status in te stellen voor de component en om de gebruikersinterface te renderen. Als u probeert rekwisieten in uw component te wijzigen, krijgt u een typefout.

Staat is een object dat wordt blootgesteld aan een component. Staat reikwijdte is beperkt tot binnen het onderdeel waar het wordt verklaard. Componenten kunnen de status initialiseren en doorgeven aan een ander component. We kunnen een staat op twee manieren aangeven, met behulp van de constructor of door staatseigenschap aan te geven. In het tweede geval, dat is gewoon syntactische suiker, en de transpiler (zoals Babel) zal van uw staatseigendomsverklaring de constructeur voor u onder de motorkap maken. Staatloze componenten of op functies gebaseerde componenten en wat React Hooks is voor op functies gebaseerde componenten zijn slechts eenvoudige JavaScript-functies. Op functies gebaseerde componenten retourneren een ReactJS-element of een verzameling, die een ‘gedeeltelijke component’ kan zijn, zoals <> ... of een volledig op functies gebaseerde component met de logische en ingebedde componenten. Aangezien u geen constructor kunt gebruiken in een op functies gebaseerde component (nou ja, eigenlijk wel, sinds ReactJS v16.8), kunt u uw component niet volledig maken. Het is statusloos omdat u geen gegevens in dit soort componenten kunt bewaren. Meestal geeft u rekwisieten door aan de op functies gebaseerde component om de UI weer te geven. Hier is een voorbeeld van de statusloze, op functies gebaseerde ReactJS-component:

Vanuit het oogpunt van prestaties is er praktisch geen verschil tussen het gebruik van op klasse gebaseerde componenten en het gebruik van op functies gebaseerde componenten. Het reactiemechanisme van ReactJS is slim genoeg om dat voor ons te optimaliseren.

Op functies gebaseerde componenten zijn eenvoudiger om mee te werken en comfortabeler om te testen. Dit is de reden waarom de community van ReactJS-ontwikkelaars je zal aansporen om functie-gebaseerde componenten te schrijven in plaats van op klasse gebaseerde componenten. Op functies gebaseerde componenten zonder status hebben enkele beperkingen en moeten in wezen één wereldwijde plaats hebben om de staat te beheren. Dat is anders dan het ReactJS-paradigma van schrijfcomponenten (zie hieronder voor meer informatie).

Om ontwikkelaars in staat te stellen om statusvolle, op functies gebaseerde componenten te schrijven en tegelijkertijd de mogelijkheid te bieden om levenscyclusmethoden van de status en componenten te gebruiken, heeft React v16.8 een nieuwe functie toegevoegd met de naam React Hooks. In wezen is React Hooks een poging om op klassen gebaseerde componenten te verwijderen. Met React Hooks kunt u op status gebaseerde functiecomponenten schrijven zonder klassen te gebruiken. Waarschijnlijk zullen we op een bepaald moment in de toekomst op klasse gebaseerde componenten met Hooks elimineren.

React Hooks heeft ook als doel het ontwerpen van applicaties te vereenvoudigen door componenten te vermijden die geen constructors hebben of nodig hebben, hoewel ze als klassen worden gedeclareerd. Meestal werkt u met componenten zonder status als u nadenkt over het ideale ontwerp van uw app. Wanneer we ReactJS-apps voor onze klanten bouwen, gebruiken we meestal een dunne laag tussen onze componentrepresentatie en de logica van de applicatie. Hiermee kunnen we de visuele weergave van de component loskoppelen van zijn gedrag.

3. Gegevens omlaag, acties omhoog

Wat is het ontwerppatroon "Gegevens omlaag, Acties omhoog"? In wezen betekent dit dat u een High-Order Component (HOC - zie uitleg hieronder) hebt die de gegevens in zijn `rekwisieten 'accepteert en die gegevens doorgeeft aan zijn weergave of geneste componenten. Om interactie te hebben met de component, activeren gebruikers acties zoals het indrukken van een knop en de component reageert op die interactie door gebeurtenissen uit te zenden. Het zet dus een gebeurtenis op gang, in de tegenovergestelde richting van hoe die gegevens werden doorgegeven.

Die gebeurtenissen of acties worden doorgegeven aan een bovenliggend onderdeel. De bovenliggende component activeert een andere actie die een algemene applicatiestatus verandert.

4. Onderdeel van hoge orde

High-Order Component (of HOC) is in wezen een ontwerppatroon, ook bekend als een decoratorpatroon. In ReactJS is een HOC een component die een andere component verpakt door extra functionaliteit of extra eigenschappen toe te voegen. Dit maakt abstractie mogelijk van enkele veelgebruikte logica en houdt uw code DROOG. Het is de manier waarop u complexe componentstructuur tussen andere componenten in ReactJS verdeelt en een manier om uw applicatielogica en gebruikersinterface te ontkoppelen. U kunt bijvoorbeeld een containercomponent gebruiken als HOC voor uw presentatie-component Button.

Hier is een voorbeeld van de component HOC ReactJS:

5. Containercomponenten

Containercomponenten hebben daarentegen logica om de status in te stellen of hebben functies om gebeurtenissen tot een oudercomponent uit te zenden. De algemene vuistregel is om uw component zo eenvoudig mogelijk te houden met het ontwerpprincipe van het Single Responsibility Principle-principe, wat in wezen betekent dat uw component één ding moet doen, maar het goed moet doen. Meestal zijn dit soort componenten de HOC's die weinig presentatiecomponenten herbergen. Presentatiecomponenten Het schrijven van eenvoudige componenten kan de algehele complexiteit van uw applicatie verminderen. Hier spelen presentatiecomponenten een rol. Deze componenten moeten minimaal tot geen logica hebben. Presentatiecomponenten accepteren gegevens en zenden gebeurtenissen uit voor een callback die ze ontvangen als onderdeel van de bijbehorende rekwisieten. In wezen geeft dit type component de gebruikersinterface weer en voert een functie uit die erin is doorgegeven wanneer een actie in de gebruikersinterface plaatsvindt. Dit type component is een bouwsteen en wordt soms een Low-Order Component (of LOC) genoemd.

6. Lijst met best practices

  • [Update 22 mei 2019] - Splits uw Reducer-code bij het gebruik van ReduxJS in kleinere methoden om enorme JSON in uw Reducer te voorkomen.
  • Overweeg om TypeScript in uw apps te gebruiken als u dit nog niet doet.
  • Gebruik de create-react-app-generator om je ReactJS-app op te starten.
  • Houd uw code DROOG. Herhaal jezelf niet, maar houd er rekening mee dat duplicaat van code NIET altijd een slechte zaak is.
  • Vermijd grote klassen, methoden of componenten, inclusief verkleiners.
  • Gebruik robuustere beheerders om de applicatiestatus te beheren, zoals Redux.
  • Gebruik gebeurtenissynchronisatie, zoals Redux-Thunk, voor interacties met uw back-end API.
  • Vermijd het doorgeven van teveel attributen of argumenten. Beperk jezelf tot vijf rekwisieten die je doorgeeft aan je component.
  • Gebruik ReactJS defaultProps en ReactJS propTypes.
  • Gebruik linter, verdeel lijnen die te lang zijn.
  • Bewaar uw eigen jslint-configuratiebestand.
  • Gebruik altijd een afhankelijkheidsmanager met een vergrendelingsbestand, zoals NPM of garen.
  • Test uw vaak gebruikte code, code die complex is en gevoelig is voor bugs.
  • Schrijf meer tests die meer testdekking bieden voor uw code met een kleine inspanning en testcode om ervoor te zorgen dat deze correct functioneert.
  • Telkens wanneer u een bug vindt, moet u eerst een test schrijven.
  • Gebruik op functies gebaseerde componenten door React Hooks te gaan gebruiken, een nieuwe ReactJS-manier om componenten met volledige status te maken.
  • Gebruik ES6-de-structurering voor uw rekwisieten.
  • Gebruik voorwaardelijke weergave.
  • Gebruiker `map ()` om verzamelingen van componenten te verzamelen en weer te geven.
  • Gebruik gedeeltelijke componenten, zoals `<>` ... ``
  • Geef uw event-handlers een naam met handle-voorvoegsels, zoals `handleClick ()` of `handleUpdate ()`.
  • Gebruik `onChange` om uw invoer te regelen, zoals` onChange = {this.handleInputChange ()} `.
  • Gebruik JEST om uw ReactJS-code te testen.

We hebben evenementsynchronisatoren genoemd, zoals Redux-Thunk. ReactJS v16.3 introduceerde een nieuwe functie genaamd React Context API. Een deel van zijn functionaliteit is het nabootsen van redux-thunk-functionaliteit en het synchroniseren van gebeurtenissen met ReactJS-middelen. Dat is een veelgevraagde functie, omdat bijna elke ReactJS-toepassing praat met de back-end API en aanvragen en gebeurtenissen moet synchroniseren. We houden die API in de gaten en houden je op de hoogte met updates.

Hier is een voorbeeld van het gebruik van defaultProps en propTypes:

7. Conclusie

We hopen dat dit artikel wat licht werpt op ReactJS best practices en patronen die erg populair zijn in 2019. Zie als bonus een ander artikel hieronder, ook kun je je aanmelden voor gratis updates en nieuwe leermaterialen over ReactJS om nieuwe updates te ontvangen. Er is nog een ding ...

We hebben echt je klap nodig! Als u dit bericht nuttig vindt, tikt u hieronder op de :)-knop :) Dit is onze eerste voor u. Je bent geweldig!

.

Bonusmateriaal: hier is ons recente artikel over Redux en Redux-Thunk. We zullen uitleggen hoe twee samenwerken.

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