10 tip til, hvordan du laver din ReactJS-kode som en PRO

Mange af os, frontend-udviklere, js-udviklere og reagerer også, udviklere arbejder i holdene, der inkluderer udviklere med forskellige kvalifikationsniveauer. Den bedste metode til forbedring af vores kode er GOD KVALITETSKODEOVERSIGT - men ikke at vi kontrollerer, om alle synes fungerer, men også hvordan gjorde vores colleges dette resultat - så vi er nødt til at forsikre om ren kode.

Hvorfor? Det er enkelt - hvis dit team tæller op til 5 personer, er det let at spørge, hvordan det fungerer. Men hvis dit team er enormt, eller der er mange dynamiske ændringer, hjælper denne kode med god kvalitet os og en anden udviklere til at forstå det, og du kan selvfølgelig føle dig som en PRO; P

Jeg har taget 10 bedste praksis, som hjælper mig og mit team med at forbedre kvaliteten af ​​koden i vores React Projects. Disse tip er generelt baseret på ES6-funktionalitet, men vi bruger dem ikke altid. Kig efter dem, og brug dem også!

1. Klassekomponenter VS Funktionskomponenter

Vi er alle meget glade for, at der i ES6 blev implementeret klassestøtte - jeg elsker det! I reaktion kan vi fremstille en komponent ved at udvide den enkle klasse kaldet 'React.Component'. Der har vi enkle tilstandsadministrationsmetoder, komponenter begivenhedsunderstøttelse osv. Nogle gange er det for meget, vi har brug for, men vi ved, at vi kan bruge det.

import React, {Component} fra 'react'
klasse MyComponent udvider komponent {
  render () {
    returner 

Hej {this.props.text}

  } }

Men i reaktionsudvikling glemmer mange udviklere, hvordan vi kan lave en komponent blot ved hjælp af funktionel komponent, der kan være en funktion med en parameter - rekvisitter.

import React fra 'react'
const MyComponent = (props) => 

Hej {props.text}

Men brugen af ​​disse to komponenter ser den samme ud!

Okay - så hvorfor skulle jeg bruge funktionelle komponenter? Fordi der er meget lettere end den udvidede klasse. Husk, at vi bruger React og en anden reaktiv ramme, fordi vi tænker over hukommelsesanvendelse - disse rammer gør en virtuel DOM uden unødvendige rekvisitter og metoder til at styre dem lettere, hurtigere og for at reservere mindre hukommelse. Så hvis vi tænker på optimering, er vi nødt til at tænke på denne forskel.

Okay - så når vi kunne bruge klassekomponenter, og når funktionskomponent? Reglerne er meget lette - NÅR DU BENYDER AT BRUGE NOGET AT DEN FUNKTIONELLE KOMPONENT IKKE HAR - BRUG KLASSEKOMPONENT!

Ret nemt? Yeah! Begynd at skrive dig komponenter fra skitse som funktionel komponent. Når du ser, at du er nødt til at bruge noget som tilstande eller opdage nogle ændringer i din komponent - som componentWillMount () osv., Så kan du omdanne det til Class Component.

Når du tænker over denne type komponentbrug, bliver du som en PRO!

2. ”Hvis” -angivelser i komponentskabelonen

Se nedenfor ... Ved du, hvad der er galt med denne metode til, hvis udsagn?

{a> b? : null}

Hvis betingelsen er inkonsekvent, vil reaktionen blive null. Hmm ... det er okay - jeg kan ikke se det, så der er ikke noget problem ... IKKE !!!

Denne null findes stadig i din DOM, så hvis du vil tage alle børn fra din liste eller kalde på nth-børn, tælles denne null !!!

Løsning?

{a> b && }

Så let, så elegant. Som en PRO!

3. Funktionsbinding

Jeg ELSKER ES6! JEG ELSKER PILFUNKTIONER !!! Men hvis du forstår, hvordan de virkelig fungerer, så er brugen af ​​dem i reaktion meget let. Mere om dem (her). I meget kort pil-funktion få et omfang fra deres direkte forælder, at der var erklære.

Hvorfor taler jeg om henvisningen til funktionsbinding? Fordi der er et meget nemt trick, der gør dig kode renere. Standardfunktionsbinding til begivenhed ser sådan ud:

klasse MyComponent udvider komponent {
  konstruktør (rekvisitter) {
    super (rekvisitter)
    this.clickHander = this.clickHander.bind (dette)
  }
  clickHander (e) {
    e.preventDefault ();
    alarm ('Hej' + this.props.text)
  }
  render () {
    returner  
  }
}

Vi erklærer clickHandler-funktion, men hovedkonteksten af ​​dem (dette) er den knap, vi klikker på. Så hvis vi ønsker at binde dette som vores klasse, så er vi nødt til at binde det i konstruktør.

Kan jeg gøre det lettere? SELVFØLGELIG!!! Ved pilefunktion, fordi det får et omfang fra deres direkte forælder, at der blev erklæret (kopi ovenfra).

klasse MyComponent udvider komponent {
  clickHander = (e) => {
    alarm ('Hej' + this.props.text)
  }
 render () {
    returner  
  }
}

Nemmere, hurtigere og ligner en PRO !!!!

** VIGTIGT **

Hvis du vil bruge denne struktur - skal du huske, at det lige nu er i eksperimentel betydning, så vi er nødt til at oversætte den med babel ved hjælp af transform-klasse-egenskab, som er standard i create-react-app. Henvisning her

4. Kortere rekvisitter og stater

En anden ting, som vi kan bruge fra ES6, men vi glemte det - destruktion. I mange kodevurderinger kan vi se, at enorme genstande ødelægges for små dele.

...
var bredde = this.props.myObject.width,
    højde = this.props.myObject.height,
    farve = this.props.myObject.color;
...

Det er for lang og ikke fleksibel løsning. Der er en meget nem måde at ødelægge det smartere på.

...
var {bredde, højde, farve} = this.props.myObject;
...

Ganske let, når vi vil have en variabel med det samme navn som objektets nøgle.

Hvordan kan vi bruge det til at reagere?

import React, {Component} fra 'react'
klasse MyComponent udvider komponent {
  render () {
    lad {name, age} = this.props
    return 

Mit navn er {navn}. Jeg er {alder} år gammel.

  } }

eller med funktionskomponent

import React fra 'react'
const MyComponent = ({navn, alder}) => 

Mit navn er {navn}. Jeg er {alder} år gammel.

Et andet eksempel? Når du bruger stor struktur af rekvisitter eller stater.

import React, {Component} fra 'react'
klasse MyComponent udvider komponent {
  tilstand = {
    hold: [
      {
        person: {
          basicInfo: {
            navn: 'Michal',
            alder: 27
          }
        }
      }
    ]
  }
  render () {
    lad {name, age} = this.props.team [0] .person.basicInfo
    
    return 

Mit navn er {navn}. Jeg er {alder} år gammel.

  } }

Let? Let! Og ligner en PRO;)

5. Adskillelse af stilarter

Meget hurtig rådgivning - Separate stilarter !!! : D

Men vi har to situationer:

  1. Vi kan bruge eksterne stilarter fra filer (.css, .scss)
  2. Vi bruger nogle komponenter, der bruger deres byggestilarter, men de bruger kun inlines som materiale-ui

Den første situation er ganske let, sat til webpack sass og stillæsser, og det er alt!

Men den anden situation er lidt vanskelig, og jeg vil vise jer få løsninger:

# 1. Konst med stilarter

import React, {Component} fra 'react'
const stilarter = {
  afsnit: {
    'Fontsize': '10px',
    'Farve': '# ff0000'
  }
}
klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      
        

Dette er min første tekst

        

Dette er min anden tekst

           )   } }

# 2. CSS-moduler

Det er en dejlig idé at indlæse CSS som objekt og reference i din kode til den klasse, der findes i din css-fil.

import React, {Component} fra 'react'
importer klasser fra './style.css'
klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      
        

Dette er min første tekst

        

Dette er min anden tekst

           )   } }

Hurtig video, hvordan du forbereder din webpakke til CSS

Og husk - hvis du kan adskille dine filer og gøre det let at redigere, fungerer du som en PRO!

6. Miljøafhængigheder

Vi elsker at prototype noget, men vi ville ikke lægge noget til produktionsversionen. Hvordan skjuler du dine fragmenter eller tilgængelige noget kun for udviklere eller i udviklingsfunktion?

Brug MILJØVARIABLER - ekstra variabel, som du kan tildele under start eller bygning af dit projekt. Når du starter en handling fra terminal, kan du sætte ekstra variabler, der skubbes til app for node i process.env, så kan du skubbe alt.

ex. MY_VARIABLE = "Hej verden!" npm kørestart

Så i process.env.MY_VARIABLE skulle vi se vores værdi.

Hvis du bruger create-react-app, har du bygget en variabel som NODE_ENV, der returnerer tilstand af din build som udvikling, produktion eller test. Og det hele til grundlæggende brug.

const isDebug = process.env.NODE_ENV === 'udvikling'

Hvordan bruges det i praksis?

import React, {Component} fra 'react'
const isDebug = process.env.NODE_ENV === 'udvikling'
klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      
        

Dette er min offentlige tekst

        {isDebug &&

Dette er min udviklingstekst

}            )   } }

Jeg er ikke sikker på, at det er som en PRO, men du kan gå forbi ENV VARIABLE nogle miljøfølsomme informationer som API root url, eller du projekt adresse osv.

** Vigtigt **

Glem ikke, at hvis nogen vil afkode din kildekode, så kan han se dig afhængigheder.

7. Husk på mulighederne for komponenttest

Det er ret let at forstå - hvis du tænker på at teste, du reagerer applikation, så vil du sandsynligvis bruge Jest til test. Men du skal huske, at hvis du forbinder dine komponenter med en eller anden backend som Apollo (til GraphQL) eller tilstandsmaskine som Redux eller en anden HOC, skal du huske, at denne udvidelser ikke er tilgængelig i simpelt komponenttest. Og det er normalt. Når du vil teste din SINGLE-komponent, tester du kun funktionen der - kontrol af, om input-rekvisitter og handlinger på komponent fungerer korrekt.

Så hvordan forbereder du dine komponenter til test?

Hvis du ikke har nogen HOC, skal du eksportere normalt:

import React, {Component} fra 'react'
klasse MyComponent udvider komponent {
  render () {
    lad {name, age} = this.props
    return 

Mit navn er {navn}. Jeg er {alder} år gammel.

  } }
eksport standard MyComponent

men hvis du vil bruge nogen HOC, brug dette mønster:

import React, {Component} fra 'react'
eksportklasse MyComponent udvider komponent {
  render () {
    lad {name, age} = this.props
    return 

Mit navn er {navn}. Jeg er {alder} år gammel.

  } }
eksporter standard myHocFunction (MyComponent)

Hvorfor? For når du vil importere i et andet dokument, du komponent med HOC, bruger du:

importer MyComponent fra './components/MyComponent'

men i test kan du bruge

import {MyComponent} fra './components/MyComponent'

Enkel kode, enkel løsning, men mange muligheder for brug - fordi vi selvfølgelig er PRO'er;)

8. Brug hjælpere

Meget, meget enkel og vigtig ting. Nogle gange bruger du de samme funktioner, eller du har de samme regler i mange komponenter. Det er unødvendigt at kopiere din kode. Adskill bare hjælpefunktioner til andre filer og anbring den i et globalt hjælpe-bibliotek:

offentlig
src
  hjælpere
    globals.js
  moduler
    Brugere
      hjælpere
        index.js
      UserList.js
      User.js
  app.js

** Vigtigt **
Hvis du duplikerer din kode - skal du forbedre den!

Filadskillelse er den bedste måde at blive som en PRO!

9. Reager fragmenter

Du har forberedt dit bedste layout, HTML-markering er den bedste, alle tænker ser smuk ud ... ARHHHH UTROLIG, bare reager implementering ... header ... ser perfekt ud ... jumbotron ... fantastisk ... vent ... Jeg har en sektion, der ikke er pakket ind ... OH NEJ ... reagerer ... SHIT!

Det var et problem, når du vil fremstille en komponent, der ikke havde en indpakning. I lang tid er vi nødt til at pakke alt sammen:

klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      
        

Dette er min første tekst

        

Dette er min anden tekst

           )   } }

fordi reaktion ikke tillader os at sætte det alene. hvorfor - blev ikke brugt, hvis hvert element inde har en egen unik-nøgle, at det kan genkende, hvilken del af DOM der er hans komponent.

MEN React har tilføjet en ny funktion kaldet “React Fragments”, der giver dig mulighed for at opbygge komponent, der grupperer mange elementer uden at indpakke DOM. Det fungerer på samme måde som div-indpakning, men i stedet for div bruger vi statement eller kort version <>

Eks.

klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      
        

Dette er min første tekst

        

Dette er min anden tekst

      
    )   } }

eller

klasse MyComponent udvider komponent {
  render () {
    Vend tilbage (
      <>
        

Dette er min første tekst

        

Dette er min anden tekst

           )   } }

Fantastisk - du er som en PRO, læse hele artiklen fra dokumentation

10. PRO'er bruger proptyper og standardprops

Hvis du er PRO, tænker du på ting, som du komponenter har brug for. Hvorfor skal jeg bruge PropTypes?

Under udvikling kan du være sikker på, at dine andre komponenter overfører korrekt værdi til dem. Hvis du vil bruge streng, skal der i dine rekvisitter være en streng, fordi eks. du kan gøre inde i komponentspecifikke ting til streng. Tilføjelse af defaultProps, hvis din propType ikke er påkrævet, beskytter dig mod, at du / eller dit projekt college glemmer at tilføje noget prop til komponenten.

import React, {Component} fra 'react'
import PropTypes fra 'prop-typer'
klasse MyComponent udvider komponent {
  render () {
    returner 

Hej {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  tekst: PropTypes.string
}
MyComponent.defaultProps = {
  tekst: 'Verden'
}

Og du vil vide mere om PropTypes - Fuld dokumentation

RESUMÉ

Som du kan se, er 10 tip meget nemme at implementere på din kode. Læs det endnu en gang, tilføj reaktion, hvis du kan lide det, og skriv i kommentarer, hvis der er noget uklart, eller hvis du vil læse om noget mere specifikt! Held og lykke!