7 Tipps und Tricks in React

TypeScript verwenden

Ob es sich nun um React oder andere Bibliotheken handelt, die Verwendung von Typescript ist eine große Hilfe bei den Bemühungen, Ihre Code organisiert. vergleichen wir folgendes Javascript vs. Typescript im Umgang mit Requisitentypen.

import PropTypes von 'prop-types'

function UserCard({ user }) {
return

{benutzer.vorname}, {benutzer.nachname}

}

UserCard.propTypes = {
Benutzer: PropTypes.shape({
vorname: PropTypes.string.isRequired,
Nachname: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

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

}

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

Schnittstelle User {
vorname: String!
Nachname: String!
...
}

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

{benutzer.vorname}, {benutzer.nachname}

}

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

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

Stellen Sie sich vor, Sie hätten alle Ihre Datenschemata als Schnittstellen an einer einzigen Stelle und könnten sie im gesamten restlichen Code wiederverwenden. Dies hilft Ihnen nicht nur, Tippfehler zu vermeiden, sondern auch, wenn Sie das Schema ändern wollen, sollten Sie es nur an einer einzigen Stelle ändern.

Außerdem stellen viele bekannte Javascript-Bibliotheken auf Typescript um, z.B: AdonisJS

Getrennte Komponenten für Präsentation und Container

Durch die Trennung von Präsentations- und Containerkomponenten lässt sich unser Code leichter testen und überdenken.

Präsentationstechnische Komponenten sich beschäftigen mit wie die Dinge aussehen. Sie erhält ihre Daten und Verhalten von übergeordneten Komponenten.

Container-Komponenten sich beschäftigen mit wie die Dinge funktionieren. Sie liefern die Daten und Verhalten zu Präsentations- oder anderen Containerkomponenten.

Mit diesem Ansatz können wir dieselben Darstellungskomponenten mit unterschiedlichen Daten und Verhaltensweisen wiederverwenden. Außerdem wird unser Code dadurch sauberer und viel einfacher zu testen.

Sehen Sie sich das folgende Beispiel mit der Benutzerkomponente an, die mit verschiedenen Containern verwendet wird, die unterschiedliche Daten und Verhaltensweisen bereitstellen.

Funktion BuyerContainer() {
return
}

function VerkäuferContainer() {
return
}

function BenutzerKomponente({ name, onClick }) {
return

}

Verwenden Sie React Hooks und funktionale Komponenten Funktionale Komponenten, die früher als zustandslose Komponenten bezeichnet wurden, sind jetzt nicht mehr zustandslos. Dank der React Hooks können Sie jetzt den State-Hook verwenden, um den Zustand in einer funktionalen Komponente zu speichern, oder sogar den Lebenszyklus der Komponente mit useEffect verwenden. Funktionale Komponenten sind einfach zu lesen und zu testen. React Core verfügt über einige weitere nützliche Hooks, die Sie in der Hooks-Referenz nachlesen können. Das Erstaunliche daran ist, dass Sie auch Ihre eigenen Hooks definieren können. Im folgenden Beispiel haben wir einen eigenen React-Hook namens useDebounce erstellt. Dieser wird verwendet, um Aufrufe der Autovervollständigungs-API zu begrenzen, wenn sich der Eingabetext ändert.

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

return (

{...}
)
}

Darüber hinaus sind React-Hooks ein hervorragender Ersatz für Higher-Order Components (HoCs). Styled Component Styled Component ist eine Bibliothek, die die Einführung von Dynamic CSS auf Komponentenebene ermöglicht und dabei die Vorteile von ES nutzt. Sie macht Ihre Komponenten berechenbarer und wiederverwendbar. Verschwenden Sie keine Zeit mehr mit der Suche nach dem richtigen Klassennamen für ein Element und versuchen Sie nicht, einen bereits vorhandenen zu verwenden. Mit Styled Components stellen Sie sicher, dass Ihre Stile auf die Komponente skaliert werden und die Klassennamen beim Build-Schritt automatisch generiert werden. Außerdem war es noch nie so einfach, dynamisches CSS zu erstellen. Ihre Stile werden entsprechend der an die Komponente übergebenen Requisiten generiert. Im folgenden Beispiel ist der div-Stil sowohl von der umrissenen Requisite als auch vom globalen Thema abhängig.

const Wrapper = styled.div`

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

    Hintergrund: ${props => props.theme.light ? 'schwarz' : 'weiß'}

Der letzte Punkt über gestylte Komponenten ist, dass es die Leistung verbessert, indem es nicht unnötige Stile von nicht verwendeten Komponenten lädt. Slot Fill Library Angenommen, Sie haben ein Layout für Ihre React-App definiert und möchten ein Widget in der Seitenleiste nur für eine bestimmte Seite hinzufügen. Wenn Sie diesen Fall nicht von Anfang an bedacht haben, kann dies eine große Änderung des Layouts erfordern. Aber mit einer Bibliothek wie ‣ können Sie einfach einen Slot in der Sidebar definieren. Dann füllen Sie diesen Slot mit Widgets nur für bestimmte Seiten. Auf diese Weise vermeiden Sie die Übergabe von Flags entlang des Komponentenbaums für den Zugriff auf die Seitenleiste. Es hat ein ähnliches Verhalten wie React Portals, das auch eine großartige Lösung für Fälle wie Modals, Tooltips usw. ist.

importiere { Slot, Fill, Provider } von 'react-slot-fill';
const Sidebar = (props) =>
 
export default Symbolleiste;
Sidebar.Item = (props) =>

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

];
const Seite = ({Kinder}) =>

{Kinder}

const HomePage = () =>

eine Seite ohne Widjet
const DashboardPage = () =>

eine Seite mit Widjet

Komponenten höherer Ordnung Auch wenn React Hooks in den meisten Fällen HOCs ersetzen. HoCs sind immer noch eine gute Wahl, wenn es darum geht, die Komplexität von Komponenten zu verbergen, wie z.B. die Bereitstellung mehrerer Props für Seitenkomponenten oder das bedingte Rendering (private Routen, Ladestatus ...) Das folgende Beispiel zeigt, wie wir die Komplexität von privaten Routen und gemeinsamen Seiten-Props in wiederverwendbaren HoCs kapseln können, die auf alle Anwendungsseiten angewendet werden. Denken Sie daran, dass die meisten HoCs durch React-Hooks ersetzt werden können und dass wir versehentlich Requisiten durch zusammengesetzte HoCs überschreiben können. Verwenden Sie HoCs also nur, wenn es notwendig ist, um die Seitenkomponenten sauberer zu halten. Ansonsten verwenden Sie React Hooks.

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

Fehlergrenzen Fehlergrenzen sind Klassenkomponenten, die alle Fehler/Ausnahmen abfangen, die auf der Ebene der untergeordneten Klassen auftreten. Wenn sie auf der obersten Ebene deklariert werden, ermöglichen sie eine angemessene Fehlerbehandlung, indem sie eine Fehlermeldung anzeigen und den Fehler in einem Plattformüberwachungswerkzeug wie Sentry protokollieren. Auf diese Weise werden Sie die ersten sein, die Fehler erkennen und versuchen, sie zu beheben, bevor sie sich auf die Benutzererfahrung auswirken. Hinweis: ErrorBoundaries sollten in Klassen deklariert werden, die keine funktionalen Komponenten unterstützen.

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
Etwas ist schief gelaufen! Kontakt Admin
;
}
return this.props.children;

}
}