5 bedste fremgangsmåder til reaktiv indfødt udvikling, som du sandsynligvis ikke kender

Efter at jeg tidligere har fået delt nogle tip baseret på mine oplevelser med at skrive koder om reagerer og reagerer native, i dag deler jeg dig nogle få bedste fremgangsmåder, som du måske ikke ved, og forhåbentlig får dine dage til at skrive native koder bedre, hurtigere, stærkere.

1. Directoryopløsning med package.json på hvert bibliotek (fungerer med ethvert javascript ud over react-native).

Her er det første tip, måske bruger du IDE eller hvad du end bruger til at skrive dine koder, og måske bruger du forskellige mappestrukturer. Hver gang du importerer komponenter fra et andet bibliotek, bruger du denne syntaks:

import TextComponent fra "../ComponentFolder/TextComponent"

eller måske

import TextComponent fra "../../ComponentFolder/TextComponent"

eller måske mere hardcore

import TextComponent fra "../../../../ComponentFolder/TextComponent"

og så videre

Så her er tip til at glemme at skrive de tilbagevendende ..

opretter først package.json på alle rodmapper over det, du vil importere, i dette eksempel er komponenter-mappen.

package.json til mappen komponenter

For det andet, prøv at importere komponenten fra en anden fil.

ser pænt ud, ikke?

PS: du kan også bruge komponentindeksering til bedre import.

voila! her er forskellene! ser temmelig pæn ud for mig!

2. Brug ternære operatører, når det er nødvendigt, ikke hele tiden.

Brug af ternære operatører ser måske køligere ud end andre devs, der bruger den gode ol, hvis ellers eller skifter udsagn, men hver syntaks har dets egne formål. Se på disse eksempler:

// sejt eksempel
const data = null;
const derpData = data? 'Im not null': 'Hej, jeg er null';
// et andet eksempel
const anotherData = null;
const anotherDerpData = data? en anden data? 'anotherData and Data is not Null': 'anotherData er null, men dataene er ikke': 'Hej, dataene er null';
// oh sh * t er det endda læsbart?

Måske bruger du fancy IDE eller fancy linter, men ikke alle fik tid til at gøre det eller bruge det, så i denne sag skal du bruge andre indstillinger, der virkelig passer. Ligesom hvad de seje børn sagde: Den rigtige mand på det rigtige sted.

3. Lås afhængigheder, undgå brudændringer.

Når du tilføjer flere og flere afhængigheder, skal du huske at låse versionen. Vær forsigtig med at bryde ændringerne, JavaScript, især JavaScript-bibliotekscenen, går virkelig hurtigt.

i stedet for at gøre dettegør dette

For at sige det enkelt skal du slette ^ karakter på rodprojektpakken.json.

4. Rediger projektniveau eller appniveau build.gradle, ikke inden for node_moduler.

Dette tip er specielt til android side, dette gik på mit hoved efter google opgradering af firebase plugins fra 11,8 til 12,0, mange reagerer indbygget afhængighed bruger den nyeste firebase / gms afhængighed som disse:

plus betyder seneste (react-native-fcm)

Ja, det nyeste er godt, men ikke altid bedst. Måske forventer du de blødende kantfunktioner og hurtig bevægelige bot, der koder i sig selv (nej, vi går for langt), i stedet får vi fejl her og der. Så hvad er løsningen?

Du kan ændre + -tegnet med den version, som dine koder fungerer inden i node_moduler og oprette dit eget git-arkiv til at gøre disse ændringer tilgængelige for dine medarbejdere eller fremtidige projektholdere.

ELLER

Du kan ændre dit app-niveau build.gradle

ændret android / app / build.gradle

og tvinge opløsningen på projektniveau build.gradle

ændret android / build.gradle

Enklere ret? og du kunne skubbe disse ind i bare en repo (selve projektet), og alle lever lykkeligt nogensinde.

5. Opret klassebaserede komponenter i stedet for enklere funktionelle komponenter, for enten statsløs eller tilstandskomponent, kan du bruge PureComponent.

For gamle reagerer / reagerer native versioner er det måske bedre og hurtigere at skrive statsløs komponent med simpel funktionel komponent

const Header = () => (
Dette er Header
);

Myten er dem, der gør komponenterne hurtigere end lysets hastighed, men her er det faktum at debunk denne myte:

Her er det hurtigere PureComponent-eksempel fra reaktionsdokumenter, du kan bruge den indbyggede shouldComponentUpdate () til bedre ydelse:

Det er det! Tak for at have læst! venligst klap klap klap, hvis I kan lide det

Rediger: tilføj detaljeret eksempel # 1