React + Redux - Best Practices

Dit artikel richt zich voornamelijk op het implementeren van enkele goede werkwijzen die ik volg bij het bouwen van grootschalige toepassingen met React en Redux.

Maak onderscheid tussen presentatiecomponenten en containercomponenten.

Wanneer we een reacttoepassing met redux ontwerpen, moeten we onze componenten opsplitsen in presentatie- en containercomponenten.

Presentatiecomponenten zijn componenten die HTML weergeven. Al onze presentatiecomponenten zijn stateless componenten, dus worden ze geschreven als functionele stateless componenten tenzij ze status- en lifecyclehaken nodig hebben. Presentatieonderdelen werken niet samen met redux store for state. Ze ontvangen gegevens via rekwisieten en geven deze weer.

Containercomponenten zijn bedoeld om gegevens uit redux store te halen en de gegevens aan de presentatiecomponenten te verstrekken. Ze zijn meestal stateful.

Presentatiecomponent moet een stateless functionele component zijn zoals getoond:

Containercomponent moet een stateful functionele component zijn, tenzij u gedwongen bent de levenscyclusmethoden van React-componenten te gebruiken.

Aandachtspunten:

  • We kunnen betere prestaties zien bij het gebruik van stateless functionele componenten. Deze componenten vermijden onnodige controles en geheugentoewijzingen en zijn daarom performanter.
  • Het is eenvoudig om een ​​component te testen, als u de component zo eenvoudig mogelijk schrijft door presentatiecomponenten en containercomponenten te splitsen.
Gebruik bindActionCreators voor verzendacties

Het eventdispatch-systeem van Redux vormt het hart van de statusbeheerfunctionaliteit. Het kan echter vervelend zijn om de verzendfunctie als een prop door te geven aan elke component die een actie moet verzenden.

Vermijd dit.

Vermijd dit.

Doe dit in plaats daarvan.

In de bovenstaande code is filterTalentPoolDataBySkills in bindActionCreators beschikbaar omdat this.props.filterTalentPoolDataBySkills om uw actie te verzenden. Het zal het gemakkelijker maken om de code langdurig te onderhouden.

Probeer het gebruik van setState en component lifecycle hooks te vermijden bij het gebruik van Redux:

Beheer de applicatiestatus met behulp van redux store als het globale status is. Probeer het gebruik van setState in uw component te vermijden wanneer u statusbeheerbibliotheken zoals redux gebruikt. Gebruik de componentstatus wanneer dit zinvol is, dwz. Een knopcomponent die een tooltip toont wanneer hij zweeft, zou Redux niet gebruiken.

Doe dit niet.

Doe dit in plaats daarvan.

Hier hebben we de redux store gebruikt om de status te krijgen en deze direct in de weergave weer te geven. Het is niet nodig om setState en component lifecycle hooks opnieuw te gebruiken. Redux is er om het staatsmanagementwerk voor u te doen.

.Bind () op de beste manier gebruiken:

Er zijn twee manieren om het bereik van de aangepaste component te binden.

  1. Ze binden in constructor.

Op deze manier wordt er slechts één extra functie gemaakt op het moment dat de component wordt gemaakt, en die functie wordt zelfs gebruikt wanneer het renderen opnieuw wordt uitgevoerd.

2. Binding op het moment van slagen als waarde.

.bind () methode maakt een nieuwe functie elke keer dat deze wordt uitgevoerd, deze methode zou ertoe leiden dat een nieuwe functie wordt gemaakt elke keer dat de renderfunctie wordt uitgevoerd. Dit heeft enkele implicaties voor de prestaties. In kleine applicaties kunnen we ze niet opmerken, terwijl we ze in grote applicaties wel kunnen opmerken. Het is dus niet verkieslijk om een ​​functie te binden op het moment van passeren als een propwaarde.

Oplossing:

  1. Het is beter om uw aangepaste functies in de constructor te binden.
  2. Er is een Babel-plug-in genaamd Class properties transform. U kunt de auto-gebonden functie schrijven met de vetpijlsyntaxis.

Als we de bovenstaande code zien, zijn er geen functies om te binden.

Gebruik Accessor-functies

Voor betere code-refactoring verplaats je al je functies die filteren, parseren en andere datatransformatie-logica naar een afzonderlijk bestand en importeer je ze om die functies te gebruiken in je connect-methode van react-redux zoals getoond.

Door dit te doen, kunt u eenvoudig flowtypen voor uw functies toevoegen.

Schrijf schonere code met behulp van ES6-functies

Door schonere code te schrijven, kunnen de ontwikkelaars de code gemakkelijk begrijpen en onderhouden. ES6-functies geven ons een veel schonere manier om code in React te schrijven.

Gebruik Destructuring & Spread attributen:

Vermijd dit.

Doe dit in plaats daarvan.

Gebruik pijlfuncties:

Vermijd dit:

Doe dit in plaats daarvan.

Gebruik stroomtypen

Eén ding is zeker: typecontrole is naar verwachting de toekomst van JS. Over het algemeen hebben veel ontwikkelaars een verwarring tussen wat te implementeren tussen flow en typoscript en hoe soepel ze kunnen worden geïntegreerd in een huidig ​​project.

Typescript is geavanceerder om in het huidige project te integreren en flow voelt eenvoudig te introduceren, met een waarschuwing dat het misschien minder van uw codering inspecteert zoals verwacht.

Naarmate het javascript-project groeit zonder te typen, zal de moeilijkere refactoring worden. Hoe groter het project, hoe hoger het risico bij refactoring. Het gebruik van typecontrole kan het risico niet volledig elimineren, maar het zal dit aanzienlijk verminderen.

Voordelen bij het gebruik van flow:

  1. Tijdige detectie van bugs of fouten.
  2. Communiceert het doel van de functie.
  3. Het verkleint complexe foutafhandeling.
  4. Verwijdert fouten in runtime-type.
Gebruik axios-bibliotheek voor http-aanvragen via jQuery ajax:

Fetch API en axios zijn de meest geprefereerde manieren om http-aanvragen te doen. Tussen deze twee zijn er enkele voordelen van het gebruik van Axios Library. Zij zijn

  • Hiermee kunnen transformaties op gegevens worden uitgevoerd voordat een verzoek wordt gedaan of nadat een antwoord is ontvangen.
  • Hiermee kunt u het verzoek of antwoord volledig wijzigen (headers ook). voer ook async-bewerkingen uit voordat het verzoek wordt gedaan of voordat Promise wordt afgehandeld.
  • Ingebouwde XSRF-bescherming.
Gebruik stijlcomponenten om uw componenten te stylen

Het basisidee van stijlcomponenten is om best practices af te dwingen door de toewijzing tussen stijlen en componenten te verwijderen. Op deze manier kunt u uw componenten coloceren met hun overeenkomstige stijlen - wat resulteert in gelokaliseerde klassenamen die de globale css-naamruimte niet vervuilen.

Als u besluit om stijlcomponenten te gebruiken, vergeet dan niet om plug-in te installeren om syntaxisaccentuering in strings te ondersteunen of misschien te helpen bij het maken van een nieuwe.

Voorbeeld:

Test uw React-componenten

Het doel van het testen van eenheden is om elk onderdeel van het programma te scheiden en te testen of de afzonderlijke onderdelen correct werken. Het isoleert het kleinste stuk testbare software van de rest van de code en bepaalt of deze zich precies gedraagt ​​zoals u verwacht. We kunnen in een vroeg stadium bugs vinden.

In React to test component gebruiken we Jest and Enzyme. Jest is gemaakt door Facebook en is een testraamwerk om JavaScript en React-code te testen. Samen met het Enzyme van Airbnb, een testhulpprogramma, is het de perfecte match om uw React-applicatie gemakkelijk te testen.

Gebruik ES Lint voor betere codeerconventies.

Goed geleide projecten hebben duidelijke consistente coderingsconventies, met geautomatiseerde handhaving. Naast het controleren van de stijl, zijn linters ook uitstekende hulpmiddelen voor het vinden van bepaalde soorten bugs, zoals die met betrekking tot een variabel bereik. Toewijzing aan niet-aangegeven variabelen en gebruik van niet-gedefinieerde variabelen zijn voorbeelden van fouten die tijdens pluistijd kunnen worden gedetecteerd.

Voor React-specifieke pluisregels gaat u met eslint-plugin-react.

Voor linting stroomtypen gaan regels met eslint-plugin-flowtype en eslint-plugin-flowtype-fouten.