Reageer op best practices en handige functies

De laatste tijd is React de nieuwe tool geworden die door ontwikkelaars wordt gebruikt om alles te maken, van een applicatie met één pagina tot mobiele applicaties. Maar sinds ik dieper op React ben ingegaan, heb ik al deze "coole" knooppuntmodules gezien die extreem slecht zijn ontwikkeld. Ze volgen geen regels, de componenten zijn veel te groot. Ze gebruiken de status voor vrijwel alles, en ze maken geen gebruik van domme componenten. Iedereen met voldoende ervaring begrijpt hoeveel gedoe dit is om te onderhouden en hoeveel belasting de browser kost als u elke component elke keer weergeeft. In dit artikel zal ik je door React best practices leiden, zowel over het instellen van React als hoe je het extreem snel kunt maken.

Houd er rekening mee dat ik dit artikel blijf updaten als er nieuwe werkwijzen opduiken.

Let op React is een functionele programmeerbibliotheek (FP) voordat je begint met lezen. Als u niet weet wat FP is, lees dan deze Stack Exchange-reactie.

Gebruik ES6 (transpiled met Babel)

ES6 maakt je leven een stuk eenvoudiger. Het zorgt ervoor dat JS er moderner uitziet en aanvoelt. Een goed voorbeeld met ES6 zijn Generators and Promises. Onthoud wanneer er een tijd was dat je een aantal geneste oproepen moest doen om een ​​asynchrone oproep te kunnen doen. Welnu, ik ben ook blij je te mogen verwelkomen Synchrone Asynchrone JS (ja, het is zo cool als het klinkt). Een goed voorbeeld hiervan zijn generatoren:

Waar:

Wordt dit:

Gebruik Webpack

De beslissing om Webpack te gebruiken is eenvoudig: Hot-herladen, verkleinde bestanden, knooppuntmodules :), en u kunt uw applicaties in kleine stukjes splitsen en lui laden.

Als u van plan bent een grootschalige toepassing te bouwen, raad ik u aan dit artikel te lezen om te begrijpen hoe lui laden werkt.

Gebruik JSX

Als u afkomstig bent van een achtergrond voor webontwikkeling, zal JSX heel natuurlijk aanvoelen. Maar als uw achtergrond niet op het web is ontwikkeld, maakt u zich dan geen zorgen, JSX is heel gemakkelijk te leren. Merk op dat als u JSX niet gebruikt, de applicatie moeilijker te onderhouden zal zijn.

Kijk altijd naar uw bundelgrootte

Een tip om uw bundel veel kleiner te maken, is rechtstreeks vanuit het rootpad van de knooppuntmodule te importeren.

Doe dit:

Foo importeren uit ‘foo / Foo’

in plaats van:

{Foo} importeren uit ‘foo’

Houd uw componenten klein (zeer klein)

Vuistregel is dat als uw rendermethode meer dan 10 regels heeft, deze waarschijnlijk veel te groot is. Het hele idee van het gebruik van React is herbruikbaarheid van codes, dus als je alles in één bestand gooit, verlies je de schoonheid van React.

Wat moet een eigen component hebben?

Wanneer u React denkt, moet u nadenken over herbruikbaarheid van code en codestructuur. U zou geen component maken voor een eenvoudig invoerelement dat slechts één coderegel heeft. Een component is een mix van 'HTML'-elementen die de gebruiker als één beschouwt. Ik weet dat dit een beetje vreemd klinkt, maar laten we een voorbeeld zien. Bekijk dit inlogscherm:

Wat is de structuur erachter? U hebt een formulier dat twee ingangen een knop en een link bevat. Laten we dit in code bekijken:

Wat is hier mis? Herhaling. De ingangen bevatten dezelfde structuur, waarom zou je dat geen component maken.

Dat is mooi. Ik zal hier niet veel in detail treden, maar als je verder wilt lezen ga dan naar Thinking React.

Hoe zit het met de staat?

De beste praktijk in React is om uw staat te minimaliseren. Een ding om in gedachten te houden is om synchronisatie tussen een kind en een ouder te vermijden. In het bovenstaande voorbeeld hebben we een formulier in die vorm die de status wordt doorgegeven als rekwisieten uit de weergave en elke keer dat de gebruiker het wachtwoord en de gebruikersnaam bijwerkt, wordt de status in de weergave bijgewerkt en niet de vorm.

Gebruik shouldComponentUpdate voor prestatieoptimalisatie

React is een malterende taal die ELKE KEER weergeeft dat de rekwisieten of de status van de component verandert. Stel je dus voor dat je de hele pagina elke keer daar in een actie moet weergeven. Dat kost een grote belasting van de browser. Dat is waar shouldComponentUpdate binnenkomt, telkens wanneer React de weergave weergeeft, controleert het of er moet shouldComponentUpdate false / true retourneert. Dus als je een component hebt die statisch is, doe jezelf dan een plezier en retourneer false. Of als het niet statisch is, controleer dan of de rekwisieten / status is gewijzigd.

Als je meer wilt lezen over prestatieoptimalisatie, lees dan mijn artikel over React Perf

Denk aan onveranderlijkheid

Als je uit Scala of andere krachtige talen komt, is onmutabiliteit een concept dat je waarschijnlijk heel goed kent. Maar als je niet bekend bent met het concept, denk dan aan onveranderlijkheid zoals het hebben van een tweeling. Ze lijken erg op elkaar en ze zien er hetzelfde uit, maar ze zijn niet gelijk. Bijvoorbeeld:

Wat is er net gebeurd? Object2 is gemaakt als een referentie van object1, wat betekent dat in elke betekenis van het woord object2 een andere manier is om naar object1 te verwijzen. Toen ik object3 maakte, maakte ik een nieuw object met dezelfde structuur als object1. De functie Object.assign neemt een nieuw object en klonen vervolgens de structuur van object1, waardoor een nieuwe referentie wordt gemaakt, dus wanneer u object1 met object3 vergelijkt, verschillen ze. Waarom is dit belangrijk? Denk aan prestatieoptimalisatie, ik heb hierboven vermeld dat React telkens weergeeft wanneer de status van een component verandert. Wanneer u de functie shouldComponentUpdate gebruikt in plaats van een grondige controle uit te voeren om te zien of alle attributen verschillen, kunt u eenvoudig de objecten vergelijken. Lees dit artikel als je meer wilt weten.

Gebruik slimme en stomme componenten

Er valt hier niet veel te zeggen, behalve dat je niet in elk object een staat hoeft te hebben. In het ideale geval heb je een slim ouderbeeld en zijn alle kinderen domme componenten die alleen rekwisieten ontvangen en geen logica bevatten. Je kunt een domme component maken door zoiets te doen:

Domme componenten zijn ook gemakkelijker te debuggen omdat het de top-down-methode afdwingt waar React voor staat.

Gebruik PropTypes

PropTypes helpen u bij het instellen van gegevensvalidatie voor componenten. Dit is erg handig bij het debuggen en bij het werken met meerdere ontwikkelaars. Iedereen die met een groot team werkt, moet dit artikel lezen.

Bind de functies altijd in de constructormethode

Wanneer u met componenten werkt die status gebruiken, probeert u componenten te binden in de constructormethode. Houd er rekening mee dat u ES7 nu kunt gebruiken en dat u de functies nu kunt binden met zoiets als dit (in plaats van binden in de constructor):

someFunction = () => {
}

Gebruik Redux / Flux

Bij het omgaan met gegevens wilt u Flux of Redux gebruiken. Met Flux / Redux kunt u eenvoudig gegevens verwerken en hoeft u de front-cache niet langer te gebruiken. Ik gebruik persoonlijk Redux omdat het je dwingt om een ​​meer gecontroleerde bestandsstructuur te hebben.

Houd er rekening mee dat het soms erg handig is om Redux / Flux te gebruiken, maar dat u misschien niet de volledige status van uw toepassing in één eenvoudig object hoeft te bewaren. Lees hier meer over.

Gebruik normalizr

Nu we het over gegevens hebben, ga ik even de tijd nemen om u kennis te laten maken met de heilige graal van het omgaan met complexe gegevensstructuren. Normalizr structureert uw geneste json-objecten tot eenvoudige structuren die u direct kunt wijzigen.

Bestandsstructuur

Ik ga hier een botte verklaring afleggen en zeggen dat ik slechts 2 bestandsstructuren met React / Redux heb gezien die het gemakkelijk maken om mee te werken.

Eerste structuur:

Tweede structuur:

Containers gebruiken (gedeprecieerd - update volgend hoofdstuk 2017)

De reden dat u containers wilt gebruiken die de gegevens doorgeven, is omdat u wilt voorkomen dat u elke weergave moet verbinden met een winkel wanneer u met Flux / Redux te maken hebt. De beste manier om dit te doen is om twee containers te maken. Een met alle beveiligde weergaven (weergaven die moeten worden geverifieerd) en een met alle onveilige weergaven. De beste manier om een ​​oudercontainer te maken, is door de kinderen te klonen en de gewenste rekwisieten door te geven.

Voorbeeld:

Gebruik sjablonen in plaats van containers

Tijdens het werken met containers en het klonen van de rekwisieten naar de weergaven vond ik een efficiëntere manier om dit te doen. De manier waarop ik het nu aanbeveel is om in plaats van containers te gebruiken, een BaseTemplate te maken die wordt uitgebreid met een AuthenticatedTemplate en een NotAuthenticatedBaseTemplate. In doet twee sjablonen u alle functionaliteit en de status die wordt gedeeld in alle niet-geverifieerde / geverifieerde weergaven. In de weergaven breidt u de sjabloon uit in plaats van React.Component uit te breiden. Op deze manier vermijd je het klonen van objecten en kun je de rekwisieten filteren die door de componentenboom worden gestuurd.

Vermijd Refs

Refs maakt uw code alleen moeilijker te onderhouden. Bovendien manipuleert u de virtuele Dom rechtstreeks wanneer u refs gebruikt. Wat betekent dat de component de hele Dom-boom opnieuw moet renderen.

Gebruik Prop-validatie

PropTypes zullen je leven een stuk beter maken als je met een groot team werkt. Hiermee kunt u schijnbaar uw componenten debuggen. Ze zullen ook uw debuggen een stuk eenvoudiger maken. In zekere zin stelt u standaardvereisten vast voor een specifiek onderdeel.

Andere opmerkingen

Ik wil benadrukken dat u al uw componenten in afzonderlijke bestanden moet splitsen.

Gebruik een router: er valt hier niet veel te zeggen, behalve dat als u een app met één pagina wilt maken, u een router nodig hebt. Ik gebruik persoonlijk React Router.

Als u flux gebruikt, vergeet dan niet om de winkel te ontbinden en te luisteren naar gebeurtenissen. U wilt geen geheugenlekken maken.

Als u de titel van uw toepassing dynamisch wilt wijzigen, kunt u zoiets doen:

Deze repo is een geweldig voorbeeld van React / Redux-authenticatie.

Wat is nieuw in 2017

Maak je klaar voor een grote herschrijving. De makers van Rea zijn nu aan het herbouwen. Het heeft betere prestaties, betere animaties en meer API's die u kunt gebruiken om grote applicaties te bouwen. Je kunt hier meer lezen.

Handige helpfuncties

De volgende functie is een objectvergelijkingsfunctie. Gebruik: controleer of de status of rekwisieten moeten veranderen in ComponentUpdate

Creëer het verloop dynamisch

Gebruik:

Maak constanten:

Render als:

Gebruik: render component als somethingTrue

Statuswaarde dynamisch wijzigen:

Mijn webpack.config.js

Lees hier meer over React High Performance-toepassingen.

Als je dit artikel leuk vond, klik dan op dat groene onderstaand zodat anderen ervan kunnen genieten. Stel ook vragen of laat notities achter met praktische tips of handige functies die u kent.

Volg mij op twitter @nesbtesh