7 nõuannet ja trikki React-süsteemis

Kasutage TypeScript

Ükskõik, kas me räägime just reactist või muudest raamatukogudest, Typescript'i kasutamine aitab nii palju kaasa, et teie kood organiseeritud. võrdleme järgmist Javascript vs Typescript, mis tegeleb rekvisiitide tüüpidega.

import PropTypes from 'prop-types'

function UserCard({ user }) {
return

{user.eesnimi}, {user.perekonnanimi}

}

UserCard.propTypes = {
user: PropTypes.kuju({
eesnimi: PropTypes.string.isRequired,
perekonnanimi: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

{users.map((user) => )}

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.kuju({
eesnimi: PropTypes.string.isRequired,
perekonnanimi: PropTypes.string.isRequired
...
}))
}

kasutajaliides User {
eesnimi: String!
perekonnanimi: String!
...
}

function UserCard({ user }: { user: User }) {
return

{user.eesnimi}, {user.perekonnanimi}

}

function UserList({ users }: { users: User[] }) {
return

{users.map((user) => )}

Kujutage ette, et kõik teie andmeskeemid on liidesed ühes kohas ja te saate neid kogu ülejäänud koodis uuesti kasutada. See ei aita teil mitte ainult vältida trükivigu, vaid ka juhul, kui soovite skeemi muuta, peaksite seda muutma ainult ühes kohas.

Lisaks sellele on paljud tuntud javascript'i raamatukogud üle minemas Typescript'ile. nt: AdonisJS

Eraldi esitlus- ja konteinerikomponendid

Esitlus- ja konteinerikomponentide eraldamine muudab meie koodi lihtsamini testitavaks ja mõistetavaks.

Esitluskomponendid on seotud kuidas asjad välja näevad. See saab oma andmed ja käitumine vanematest komponentidest.

Konteineri komponendid on seotud kuidas asjad toimivad. Nad pakuvad andmed ja käitumine esitlus- või muudele konteineri komponentidele.

Selle lähenemisviisi kasutamine võimaldab meil samu esitluskomponente erinevate andmete ja käitumisega uuesti kasutada. Lisaks sellele muudab see meie koodi puhtamaks ja palju lihtsamini testitavaks.

Vaadake järgmist näidet kasutajakomponendiga, mida kasutatakse erinevate konteineritega, mis pakuvad erinevaid andmeid ja käitumist.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Kasutage React konksud ja funktsionaalsed komponendid Funktsionaalsed komponendid, mida varem nimetati staatusteta komponentideks, ei ole enam staatusteta. tänu React konksudele saate nüüd useState konksu abil salvestada oleku funktsionaalsesse komponenti. või isegi kasutada komponendi elutsüklit useEffecti abil. Funktsionaalseid komponente on lihtne lugeda ja testida. React Core sai mõned teised kasulikud konksud, mida saate uurida Hooks Reference. Hämmastav on see, et saate ka oma kohandatud konksud defineerida. Järgnevas näites lõime kohandatud react konksu nimega useDebounce. Mida kasutatakse autocomplete API kutsete piiramiseks, kui sisenditekst muutub.

import { useEffect } from 'react';
import { debounce } from 'lodash';
export default function useDebounce( fn, delay = 500 ) { {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (valikuline)
}, 1000) // 1 sek

return (

{...}
)
}

Lisaks sellele on React konksud suurepäraseks asenduseks kõrgema astme komponentidele (HoC). Styled Component Styled Component on raamatukogu, mis võimaldab dünaamilise CSS-i kasutuselevõttu komponentide tasandil. kasutades samal ajal ES-i eeliseid. See muudab teie komponendid prognoositavamaks ja taaskasutatavamaks. Unustage liiga palju aega, et otsida elemendile õiget klassinime, püüdes samal ajal vältida olemasoleva klassi kasutamist. Stiliseeritud komponentide abil tagate, et teie stiilid on komponendile ja automaatselt genereeritud klassinimedele loomisetapis määratud. Peale selle ei ole kunagi varem olnud lihtsam luua dünaamilist CSS-i. Teie stiilid genereeritakse vastavalt komponendile edastatud rekvisiitidele. Järgnevas näites sõltub div stiil nii kirjeldatud rekvisiidist kui ka globaalsest teemast.

const Wrapper = styled.div`

  border: ${props => props.outlined ? '1px solid' : 'none'};

    background: ${props => props.theme.light ? 'black' : 'white'}

Viimane punkt stiliseeritud komponentide kohta on see, et see parandab jõudlust, kuna ei lae kasutamata komponentide mittevajalikke stiile. Slot Fill Library Olgu teil on määratletud paigutus oma react app. siis soovite lisada vidinat külgribal ainult konkreetse lehe jaoks. Kui te ei ole seda juhtumit algusest peale arvestanud See võib nõuda suurt muudatust paigutusele. Aga kasutades sellist raamatukogu nagu ‣ Saate lihtsalt defineerida Slot küljepalk. Siis täitke see pesa ainult konkreetsete lehekülgede jaoks mõeldud vidinatega. nii väldite kogu komponentide puu kaudu Sidebarile ligipääsemiseks vajalike lipukeste edastamist. See on sarnane käitumine React portaalidega, mis on samuti suurepärane lahendus sellistel juhtudel nagu Modals, Tooltips...

import { Slot, Fill, Provider } from 'react-slot-fill';
const Sidebar = (props) =>
 
export default Toolbar;
Sidebar.Item = (props) =>

{ props.label }
const Widget = () =>
[

];
const Page = ({lapsed}) =>

{children}

const HomePage = () =>

lehekülg ilma Widjetita
const DashboardPage = () =>

lehekülg koos Widjetiga

Kõrgema astme komponendid Isegi kui React konksud asendavad enamasti HOC-i. HoC-d on ikkagi suurepärane valik seoses komponentide keerukuse varjamisega, nagu näiteks mitme rekvisiidi pakkumine lehekülje komponentidele või tingimuslik renderdamine (privaatsed marsruudid, laadimisstaatus ...) Järgnev näide näitab, kuidas saame kapseldada nii privaatsete marsruutide kui ka lehekülje ühiste rekvisiitide keerukuse taaskasutatavatesse HoC-desse, mida rakendatakse kõigile rakenduse lehekülgedele. Pidage meeles, et enamik HoCs juhtumeid saab asendada React Hooks. ja et me võime kogemata üle kirjutada rekvisiidid koosnevad HoCs. Seega kasutage HoCe ainult siis, kui see on vajalik, et hoida lehe komponendid puhtamad. muidu kasutage React Hooks.

function withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Profiilileht
}
export default withPrivateRoute(withPageProps(ProfilePage))

Veapiirid Veapiirid on klassi komponendid, mis püüavad kõik laste tasandil visatud vead/eksimused. Kui see on deklareeritud ülemisel tasandil, võimaldab see teha korralikku veakäitlust, näidates veateadet ja logides vea platvormi jälgimisvahendisse nagu Sentry. Nii saate olla esimene, kuidas püüda vigu ja proovida neid parandada enne, kui see mõjutab kasutajakogemust. Märkus: ErrorBoundaries tuleks deklareerida klassis nad ei toeta funktsionaalseid komponente.

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
Midagi läks valesti ! Võtke ühendust administraatoriga
;
}
return this.props.children;

}
}