7 Suggerimenti e trucchi in React

Utilizzare TypeScript

Sia che si parli di react o di altre librerie, l'uso di Typescript aiuterà moltissimo nel tentativo di mantenere il vostro codice organizzato. confrontiamo quanto segue Javascript contro Typescript che tratta i tipi di oggetti.

importare PropTypes da "prop-types".

function UserCard({utente }) {
restituisce

{nome.utente}, {cognome.utente}

}

UserCard.propTypes = {
utente: PropTypes.shape({
firstname: PropTypes.string.isRequired,
cognome: PropTypes.string.isRequired
...
})
}

function UserList({utenti }) {
restituire

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

}

UserList.propTypes = {
utenti: PropTypes.arrayOf(PropTypes.shape({
firstname: PropTypes.string.isRequired,
cognome: PropTypes.string.isRequired
...
}))
}

interfaccia Utente {
nome: Stringa!
cognome: Stringa!
...
}

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

{nome.utente}, {cognome.utente}

}

function UserList({utenti }: {utenti: User[] }) {
restituisce

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

Immaginate di avere tutti i vostri schemi di dati come interfacce in un unico posto e di riutilizzarli in tutto il resto del codice. Questo non solo vi aiuterà a evitare errori di battitura, ma anche, nel caso in cui vogliate cambiare lo schema, a modificarlo in un unico punto.

Inoltre, molte note librerie javascript stanno migrando verso Typescript. es: AdonisJS

Componenti di presentazione e contenitori separati

La separazione dei componenti Presentational e Container rende il nostro codice più facile da testare e da analizzare.

Componenti di presentazione si occupano di come appaiono le cose. Riceve il suo dati e comportamento dai componenti genitori.

Componenti del contenitore si occupano di come funzionano le cose. Forniscono il dati e comportamento a componenti di presentazione o altri contenitori.

Questo approccio ci consente di riutilizzare gli stessi componenti di presentazione con dati e comportamenti diversi. Inoltre, rende il nostro codice più pulito e molto più facile da testare.

Verificate il seguente esempio con User Component, utilizzato con diversi contenitori che forniscono dati e comportamenti diversi.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ nome, onClick }) {
return

}

Usare gli hook React e i componenti funzionali I componenti funzionali, prima chiamati componenti stateless, non sono più stateless. Grazie agli hook React, ora è possibile utilizzare l'hook useState per memorizzare lo stato in un componente funzionale o anche utilizzare il ciclo di vita del componente con useEffect. I componenti funzionali sono facili da leggere e da testare. React Core ha altri utili ganci che si possono esplorare nella sezione Hooks Reference. La cosa sorprendente è che si possono anche definire ganci personalizzati. Nell'esempio seguente, abbiamo creato un hook personalizzato di react chiamato useDebounce. Che viene utilizzato per limitare le chiamate all'API di completamento automatico quando il testo inserito cambia.

importare { useEffect } da 'react';
importare { debounce } da 'lodash';
Esportazione della funzione predefinita useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
ritardo,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
restituire debounced;
}
esportazione della funzione predefinita SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (opzionale)
}, 1000) // 1 sec

return (

{...}
)
}

Inoltre, i ganci React sono un ottimo sostituto dei componenti di ordine superiore (HoC). Styled Component Styled Component è una libreria che consente l'introduzione di CSS dinamico a livello di componente, sfruttando i vantaggi di ES. Rende i componenti più prevedibili e riutilizzabili. Dimenticatevi di perdere troppo tempo a cercare il nome della classe giusta per un elemento, evitando di usarne una già esistente. Con Styled Components, gli stili sono assegnati al componente e i nomi delle classi sono generati automaticamente in fase di creazione. Inoltre, non è mai stato così facile creare CSS dinamico. Gli stili saranno generati in base agli oggetti di scena passati al componente. Nell'esempio seguente, lo stile del div dipende sia dal prop delineato che dal tema globale.

const Wrapper = styled.div`

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

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

L'ultimo aspetto dei componenti con stile è che migliorano le prestazioni, evitando di caricare stili non necessari di componenti non utilizzati. Libreria di riempimento degli slot Se si è definito un layout per la propria applicazione react, si vuole aggiungere un widget nella barra laterale solo per una pagina specifica. Se non si è considerato questo caso fin dall'inizio, può richiedere un'enorme modifica del layout. Ma usando una libreria come ‣ si può semplicemente definire uno slot nella barra laterale. In questo modo si evita di passare flag lungo tutta la struttura dei componenti per accedere alla barra laterale. Ha un comportamento simile a quello di React Portals, che è anche un'ottima soluzione per casi come Modals, Tooltips...

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

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

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

{children}

const HomePage = () =>

una pagina senza Widjet
const DashboardPage = () =>

una pagina con Widjet

Componenti di ordine superiore Anche se gli hook React sostituiscono gli HOC nella maggior parte dei casi. Gli HoC sono ancora un'ottima scelta per nascondere la complessità dei componenti, come la fornitura di oggetti di scena multipli ai componenti di pagina o il rendering condizionale (rotte private, stato di caricamento...) L'esempio seguente illustra come incapsulare la complessità delle rotte private e degli oggetti di scena comuni della pagina in HoC riutilizzabili applicati a tutte le pagine dell'applicazione. Si tenga presente che la maggior parte degli HoC può essere sostituita dagli hook React e che, per errore, si possono sovrascrivere gli oggetti di scena con gli HoC composti. Pertanto, utilizzare gli HoC solo se necessario per mantenere i componenti della pagina più puliti, altrimenti utilizzare gli hook React.

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
Pagina del profilo
}
export default withPrivateRoute(withPageProps(ProfilePage))

Confini di errore I confini di errore sono componenti di classe che catturano tutti gli errori/eccezioni lanciati a livello di bambini. Se dichiarati al livello superiore, consentono di gestire correttamente gli errori, mostrando un messaggio di errore e registrando l'errore in uno strumento di monitoraggio della piattaforma come Sentry. In questo modo, sarete i primi a cogliere gli errori e a cercare di risolverli prima che abbiano un impatto sull'esperienza dell'utente. Nota: gli ErrorBoundaries devono essere dichiarati in classi che non supportano componenti funzionali.

classe ErrorBoundary estende React.Component {
costruttore(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
se (this.state.hasError) {
return
Qualcosa è andato storto! Contatta Admin
;
}
return this.props.children;

}
}