7 patarimai ir gudrybės naudojant React

Naudokite TypeScript

Nesvarbu, ar kalbame tik apie reaguoti arba kitas bibliotekas, naudodami Mašinraštis labai padės išlaikyti jūsų kodas organizuota. palyginkime šiuos dalykus Javascript vs Typescript, susijęs su rekvizitų tipais.

importuoti PropTypes iš 'prop-types'

funkcija UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
vardas: PropTypes.string.isRequired,
pavardė: PropTypes.string.isRequired
...
})
}

funkcija UserList({ users }) {
return

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

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
vardas: PropTypes.string.isRequired,
pavardė: PropTypes.string.isRequired
...
}))
}

sąsaja Vartotojas {
vardas: String!
pavardė: String!
...
}

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

{user.firstname}, {user.lastname}

}

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

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

Įsivaizduokite, kad visus savo duomenys schemas kaip sąsajas vienoje vietoje ir pakartotinai jas naudoti visame likusiame kode. Tai ne tik padės išvengti rašymo klaidų, bet ir tuo atveju, jei norėsite pakeisti schemą, turėtumėte ją keisti tik vienoje vietoje.

Be to, daugelis gerai žinomų javascript bibliotekų pereina prie Typescript, pvz: AdonisJS

Atskirti pristatymo ir konteinerių komponentus

Atskyrus pristatomąsias ir talpyklos sudedamąsias dalis, mūsų kodą lengviau testuoti ir pagrįsti.

Pristatomieji komponentai yra susiję su kaip viskas atrodo. Jis gauna savo duomenys ir elgsena iš pirminių komponentų.

Konteinerių sudedamosios dalys yra susiję su kaip viskas veikia. Jie teikia duomenys ir elgsena į pristatomąsias ar kitas konteinerio sudedamąsias dalis.

Taikant šį metodą galima mus pakartotinai naudoti tuos pačius pateikimo komponentus su skirtingais duomenimis ir elgsena. Be to, dėl to mūsų kodas tampa švaresnis ir jį daug lengviau testuoti.

Patikrinkite toliau pateiktą pavyzdį su User Component, kuris naudojamas su skirtingais konteineriais, teikiančiais skirtingus duomenis ir elgseną.

funkcija BuyerContainer() {
return
}

funkcija SellerContainer() {
return
}

funkcija UserComponent({ name, onClick }) {
return

}

Naudokite React kabliukus ir funkcinius komponentus Funkciniai komponentai, kurie anksčiau buvo vadinami komponentais be būsenos, nebėra be būsenos. React kabliukų dėka dabar galite naudotiState kabliuką, kad išsaugotumėte būseną funkciniame komponente, arba net naudoti komponento gyvavimo ciklą naudodami useEffect. Funkcinius komponentus lengva skaityti ir testuoti. React Core turi ir kitų naudingų kabliukų, kuriuos galite išnagrinėti "Hooks Reference". Nuostabu tai, kad taip pat galite apibrėžti savo pasirinktinius kabliukus. Toliau pateiktame pavyzdyje sukūrėme pasirinktinį react kabliuką, pavadintą useDebounce. Kuris naudojamas apriboti automatinio užbaigimo API skambučius, kai įvesties tekstas pasikeičia.

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

return (

{...}
)
}

Be to, React kabliukai puikiai pakeičia aukštesnės eilės komponentus (angl. Higher-Order Components, HoCs). Styled Component Styled Component - tai biblioteka, leidžianti komponentų lygmeniu įdiegti dinaminį CSS, kartu pasinaudojant ES privalumais. Ji padaro jūsų komponentus labiau nuspėjamus ir pakartotinai naudojamus. Pamirškite, kad gaištate per daug laiko ieškodami tinkamo elemento klasės pavadinimo ir kartu bandydami išvengti jau esamos klasės pavadinimo naudojimo. Naudodami "Styled Components" užtikrinkite, kad jūsų stiliai būtų priskirti komponentui ir automatiškai generuojami klasių pavadinimai kūrimo etape. Be to, dar niekada nebuvo taip paprasta kurti dinaminius CSS. jūsų stiliai bus generuojami pagal komponentui perduotus rekvizitus. Toliau pateiktame pavyzdyje div stilius priklauso ir nuo išdėstytos atramos, ir nuo globalios temos.

const Wrapper = styled.div`

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

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

Paskutinis punktas apie stilizuotus komponentus yra tai, kad jis pagerina našumą, nes neįkelia nereikalingų nenaudojamų komponentų stilių. Slotų užpildymo biblioteka Tarkime, nustatėte savo react programos maketą. tada norite pridėti valdiklį į šoninę juostą tik tam tikrame puslapyje. Jei šio atvejo nenumatėte iš pat pradžių Tai gali pareikalauti didelių maketo pakeitimų. Tačiau naudodami tokią biblioteką kaip ‣ Galite tiesiog apibrėžti šoninės juostos lizdą. Tada užpildykite tą lizdą valdikliais, skirtais tik konkretiems puslapiams. taip išvengsite vėliavėlių perdavimo visame komponentų medyje, kad pasiektumėte šoninę juostą. Tai panašus elgesys kaip ir React Portalai, kurie taip pat yra puikus sprendimas tokiems atvejams kaip Modals, Tooltips...

importuoti { Slot, Fill, Provider } iš 'react-slot-fill';
const Sidebar = (rekvizitai) =>
 
export default Įrankių juosta;
Sidebar.Item = (props) =>

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

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

{children}

const HomePage = () =>

Puslapis be Widjet
const DashboardPage = () =>

puslapis su Widjet

Aukštesnės eilės komponentai Net jei React kabliukai daugeliu atvejų pakeičia HOC. HoC vis dar yra puikus pasirinkimas, kai reikia paslėpti komponentų sudėtingumą, pavyzdžiui, puslapio komponentų daugybinių rekvizitų pateikimą arba sąlyginį atvaizdavimą (privatūs maršrutai, įkrovimo būsena...). Toliau pateiktas pavyzdys rodo, kaip galima uždaromi tiek privačių maršrutų, tiek bendrų puslapio rekvizitų sudėtingumą į daugkartinio naudojimo HoC, taikomus visiems taikomosios programos puslapiams. Atminkite, kad daugumą HoCs atvejų galima pakeisti React kabliukais. ir kad per klaidą galime pakeisti rekvizitus sudarytais HoCs. Todėl HoCs naudokite tik tada, kai tai būtina, kad puslapio komponentai būtų švaresni. priešingu atveju naudokite React Hooks.

funkcija withPrivateRoute(Component) {
...
grąžinti funkciją PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
funkcija withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
funkcija ProfilePage({ navigation, currentPath, currentUser}) {
return
Profilio puslapis
}
export default withPrivateRoute(withPageProps(ProfilePage))

Klaidų ribos Klaidų ribos - tai klasės komponentai, kurie sugauna visas vaikų lygmenyje išmetamas klaidas ir (arba) išimtis. Deklaravus aukščiausiu lygiu, galima tinkamai tvarkyti klaidas, rodant klaidos pranešimą ir registruojant klaidą platformos stebėjimo įrankiu, pavyzdžiui, "Sentry". Tokiu būdu būsite pirmieji, kaip užfiksuoti klaidas, ir bandysite jas ištaisyti, kol jos nepaveikė naudotojo patirties. Pastaba: ErrorBoundaries turėtų būti deklaruojamos klasėje jos nepalaiko funkcinių komponentų.

klasė 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
Kažkas nepavyko ! Susisiekite su administratoriumi
;
}
return this.props.children;

}
}