7 vinkkiä ja niksiä React:ssä

Käytä TypeScript

Puhuimmepa sitten vain Reactista tai muista kirjastoista, Typescriptin käyttö auttaa niin paljon pyrkimyksissä pitää sinun koodi järjestäytynyt. verrataanpa seuraavia Javascript vs Typescript, joka käsittelee rekvisiittatyyppejä.

import PropTypes from 'prop-types'.

function UserCard({ user }) {
return

{user.etunimi}, {user.sukunimi}

}

UserCard.propTypes = {
user: PropTypes.shape({
etunimi: PropTypes.string.isRequired,
sukunimi: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

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

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
etunimi: PropTypes.string.isRequired,
sukunimi: PropTypes.string.isRequired
...
}))
}

käyttöliittymä User {
etunimi: String!
sukunimi: String!
...
}

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

{user.etunimi}, {user.sukunimi}

}

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

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

Kuvittele, että sinulla on kaikki tietoskeemasi rajapintoina yhdessä paikassa ja voit käyttää niitä uudelleen kaikessa muussa koodissasi. Näin vältät kirjoitusvirheet ja jos haluat muuttaa skeemaa, sinun tarvitsee muuttaa sitä vain yhdessä paikassa.

Lisäksi monet tunnetut javascript-kirjastot ovat siirtymässä Typescriptiin. esim: AdonisJS

Erilliset esitys- ja säiliökomponentit

Esityskomponenttien ja säiliökomponenttien erottaminen toisistaan helpottaa koodin testaamista ja päättelyä.

Esityskomponentit koskevat miltä asiat näyttävät. Se saa sen tiedot ja käyttäytyminen vanhemmista komponenteista.

Säiliön osat koskevat miten asiat toimivat. Ne tarjoavat tiedot ja käyttäytyminen esittely- tai muihin säiliökomponentteihin.

Tämän lähestymistavan avulla voimme käyttää samoja esityskomponentteja uudelleen eri tiedoilla ja käyttäytymisellä. Lisäksi se tekee koodistamme siistimpää ja paljon helpommin testattavaa.

Tarkista seuraava esimerkki User Componentin kanssa, jota käytetään eri säiliöiden kanssa, jotka tarjoavat erilaisia tietoja ja käyttäytymistä.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Käytä React-koukkuja ja toiminnallisia komponentteja Toiminnalliset komponentit, joita aiemmin kutsuttiin tilattomiksi komponenteiksi, eivät ole enää tilattomia. React-koukkujen ansiosta voit nyt käyttääState-koukkua tallentaaksesi tilan toiminnalliseen komponenttiin. tai jopa käyttää komponentin elinkaarta useEffectin avulla. Funktionaalisia komponentteja on helppo lukea ja testata. React Core -ohjelmassa on muitakin hyödyllisiä koukkuja, joihin voit tutustua koukkujen viitteessä. Hämmästyttävää on, että voit myös määritellä omia koukkuja. Seuraavassa esimerkissä loimme mukautetun react-koukun nimeltä useDebounce. Jota käytetään rajoittamaan automaattisen täydennyksen API-kutsuja, kun syöttöteksti muuttuu.

import { useEffect } from 'react';
import { debounce } from 'lodash';
export default function useDebounce( fn, viive = 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 (valinnainen)
}, 1000) // 1 sekunti

return (

{...}
)
}

Tämän lisäksi React-koukut ovat erinomainen korvaaja korkeamman järjestyksen komponenteille (HoC). Styled Component Styled Component on kirjasto, joka mahdollistaa dynaamisen CSS:n käyttöönoton komponenttitasolla. hyödyntäen samalla ES:n etuja. Se tekee komponenteistasi ennustettavampia ja uudelleenkäytettävämpiä. Unohda, että tuhlaat liikaa aikaa elementin oikean luokkanimen etsimiseen yrittäessäsi välttää olemassa olevan luokan käyttöä. Styled Componentsin avulla varmistat, että tyylit on rajattu komponenttiin ja luokkien nimet luodaan automaattisesti rakennusvaiheessa. Tämän lisäksi dynaamisen CSS:n luominen ei ole koskaan ollut helpompaa. tyylisi luodaan komponenttiin välitettyjen rekvisiitan mukaan. Seuraavassa esimerkissä div-tyyli on riippuvainen sekä hahmotellusta propista että globaalista teemasta.

const Wrapper = styled.div`

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

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

Viimeinen seikka tyylitetyistä komponenteista on se, että se parantaa suorituskykyä, kun käyttämättömien komponenttien tarpeettomia tyylejä ei ladata. Slot Fill Library Oletetaan, että olet määritellyt ulkoasun react-sovelluksellesi. sitten haluat lisätä widgetin sivupalkkiin vain tietylle sivulle. Jos et ottanut tätä tapausta huomioon alusta alkaen Se voi vaatia valtavan muutoksen ulkoasuun. Mutta käyttämällä kirjastoa kuten ‣ Voit vain määritellä Slot sivupalkissa. Täytä sitten tuo paikka widgetillä vain tietyille sivuille. näin vältät lippujen välittämisen pitkin komponenttipuuta, jotta pääset sivupalkkiin. Se käyttäytyy samalla tavalla kuin React Portals, joka on myös loistava ratkaisu esimerkiksi 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 = ({lapset}) =>

{children}

const HomePage = () =>

Sivu ilman Widjetiä
const DashboardPage = () =>

Sivu, jossa on Widjet

Korkeamman järjestyksen komponentit Vaikka React-koukut korvaavatkin HOC:t useimmissa tapauksissa. HoC:t ovat silti loistava valinta, kun halutaan piilottaa monimutkaisuus komponenteista, kuten useiden rekvisiittien tarjoaminen sivukomponenteille tai ehdollinen renderöinti (yksityiset reitit, lataustila ...) Seuraava esimerkki havainnollistaa, miten voimme kapseloida sekä yksityisten reittien että sivujen yhteisten rekvisiittien monimutkaisuuden uudelleenkäytettäviin HoC:iin, joita sovelletaan kaikkiin sovelluksen sivuihin. Pidä mielessä, että useimmat HoC-tapaukset voidaan korvata React-koukuilla. ja että voimme vahingossa ohittaa rekvisiittoja koostetuilla HoC-koukuilla. Käytä siis HoCeja vain silloin, kun se on tarpeen, jotta sivukomponentit pysyvät siisteinä. muutoin käytä React Hooks -koukkuja.

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
Profiili-sivu
}
export default withPrivateRoute(withPageProps(ProfilePage))

Virherajat Virherajat ovat luokkakomponentteja, jotka nappaavat kaikki lasten tasolla heitetyt virheet/poikkeukset. Kun ne on ilmoitettu ylimmällä tasolla, voit tehdä asianmukaisen virheenkäsittelyn näyttämällä virheilmoituksen ja kirjaamalla virheen alustan valvontatyökaluun, kuten Sentryyn. Näin saat ensimmäisenä virheet kiinni ja voit yrittää korjata ne ennen kuin ne vaikuttavat käyttäjäkokemukseen. Huomautus: ErrorBoundaries tulisi ilmoittaa luokassa ne eivät tue toiminnallisia komponentteja.

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
Jokin meni pieleen ! Ota yhteyttä ylläpitäjään
;
}
return this.props.children;

}
}