7 porad i wskazówek w React

Użyj TypeScript

Niezależnie od tego, czy mówimy tylko o react, czy o innych bibliotekach, korzystanie z Typescript bardzo pomoże w utrzymaniu kod zorganizowane. porównajmy następujące Javascript vs Typescript zajmujący się typami rekwizytów.

import PropTypes z 'prop-types'

function UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
firstname: PropTypes.string.isRequired,
lastname: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

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

}

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

interfejs Użytkownik {
imię: String!
lastname: String!
...
}

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

{user.firstname}, {user.lastname}

}

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

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

Wyobraź sobie, że masz wszystkie schematy danych jako interfejsy w jednym miejscu i używasz ich ponownie w pozostałej części kodu. Pomoże to nie tylko uniknąć błędów w pisaniu, ale także w przypadku, gdy chcesz zmienić schemat, powinieneś zmienić go tylko w jednym miejscu.

Poza tym, wiele znanych bibliotek javascript migruje do Typescript, np: AdonisJS

Oddzielne komponenty prezentacyjne i kontenerowe

Oddzielenie komponentów prezentacyjnych i kontenerowych sprawia, że nasz kod jest łatwiejszy do testowania i rozumowania.

Elementy prezentacyjne dotyczą jak wszystko wygląda. Otrzymuje swoje dane i zachowanie z komponentów nadrzędnych.

Komponenty kontenera dotyczą jak to działa. Zapewniają one dane i zachowanie do komponentów prezentacyjnych lub innych komponentów kontenera.

Zastosowanie tego podejścia pozwala nam na ponowne wykorzystanie tych samych komponentów prezentacyjnych z różnymi danymi i zachowaniem. Ponadto sprawia, że nasz kod jest czystszy i znacznie łatwiejszy do przetestowania.

Sprawdź poniższy przykład z User Component, który jest używany z różnymi kontenerami, które zapewniają różne dane i zachowanie.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Używaj haków React i komponentów funkcjonalnych Komponenty funkcjonalne "określane wcześniej jako komponenty bezstanowe" nie są już bezstanowe. Dzięki hakom React możesz teraz używać hakaState do przechowywania stanu w komponencie funkcjonalnym. a nawet korzystać z cyklu życia komponentu za pomocą useEffect. Komponenty funkcjonalne są łatwe do odczytania i przetestowania. React Core ma kilka innych przydatnych haków, które można zbadać w Hooks Reference. Niesamowite jest to, że można również definiować własne haki. W poniższym przykładzie utworzyliśmy niestandardowy hak react o nazwie useDebounce. Służy on do ograniczania wywołań API autouzupełniania, gdy zmienia się wprowadzany tekst.

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 (opcjonalnie)
}, 1000) // 1 sek.

return (

{...}
)
}

Poza tym, haki React są świetnym zamiennikiem dla komponentów wyższego rzędu (HoC). Styled Component Styled Component to biblioteka pozwalająca na wprowadzenie dynamicznego CSS na poziomie komponentu, przy jednoczesnym wykorzystaniu zalet ES. Sprawia, że komponenty są bardziej przewidywalne i wielokrotnego użytku. Zapomnij o marnowaniu zbyt wiele czasu na szukanie właściwej nazwy klasy dla elementu, próbując jednocześnie uniknąć używania już istniejącej. Dzięki Styled Components masz pewność, że style są przypisane do komponentu i automatycznie generowane nazwy klas na etapie kompilacji. Poza tym tworzenie dynamicznego CSS nigdy nie było łatwiejsze. Style będą generowane zgodnie z rekwizytami przekazanymi do komponentu. W poniższym przykładzie styl div jest zależny zarówno od zarysowanego rekwizytu, jak i globalnego motywu.

const Wrapper = styled.div`

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

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

Ostatnią kwestią związaną z komponentami stylizowanymi jest to, że poprawiają one wydajność, nie ładując niepotrzebnych stylów nieużywanych komponentów. Slot Fill Library Załóżmy, że zdefiniowałeś layout dla swojej aplikacji reactowej, a następnie chcesz dodać widżet na pasku bocznym tylko dla określonej strony. Jeśli nie rozważyłeś tego przypadku od samego początku, może to wymagać ogromnej zmiany układu. Ale używając biblioteki takiej jak ‣ możesz po prostu zdefiniować slot na pasku bocznym. W ten sposób unikniesz przekazywania flag wzdłuż całego drzewa komponentów, aby uzyskać dostęp do paska bocznego. Ma podobne zachowanie do React Portals, które jest również świetnym rozwiązaniem w przypadkach takich jak Modals, Tooltips ...

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

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

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

{children}

const HomePage = () =>

strona bez Widjet
const DashboardPage = () =>

strona z Widjet

Komponenty wyższego rzędu Nawet jeśli haki React zastępują HOC w większości przypadków. HoCs są nadal doskonałym wyborem, jeśli chodzi o ukrywanie złożoności komponentów, takich jak dostarczanie wielu rekwizytów do komponentów strony lub renderowanie warunkowe (trasy prywatne, stan ładowania ...) Poniższy przykład ilustruje, w jaki sposób możemy zamknąć złożoność zarówno tras prywatnych, jak i wspólnych rekwizytów strony w HoCs wielokrotnego użytku stosowanych do wszystkich stron aplikacji. Należy pamiętać, że większość przypadków HoCs można zastąpić hakami React. i że możemy przez pomyłkę nadpisać rekwizyty przez skomponowane HoCs. Dlatego używaj HoCs tylko wtedy, gdy jest to konieczne, aby zachować czystość komponentów strony. w przeciwnym razie użyj 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
Strona profilu
}
export default withPrivateRoute(withPageProps(ProfilePage))

Granice błędów Granice błędów to komponenty klasy, które wychwytują wszystkie błędy/wyjątki rzucane na poziomie dzieci. Zadeklarowane na najwyższym poziomie pozwalają na prawidłową obsługę błędów poprzez wyświetlanie komunikatu o błędzie i rejestrowanie błędu w narzędziu do monitorowania platformy, takim jak Sentry. W ten sposób będziesz pierwszym, który wychwyci błędy i spróbuje je naprawić, zanim wpłynie to na wrażenia użytkownika. Uwaga: ErrorBoundaries powinny być zadeklarowane w klasie, która nie obsługuje komponentów funkcjonalnych.

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
Coś poszło nie tak! Skontaktuj się z administratorem
;
}
return this.props.children;

}
}