7 porad i wskazówek w React

Użyj TypeScript

Niezależnie od tego, czy mówimy tylko o reagować lub innych bibliotek, używając Maszynopis bardzo pomoże w staraniach o utrzymanie 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 dane Schematy jako interfejsy w jednym miejscu i ponowne wykorzystanie ich 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 my aby ponownie wykorzystać te same komponenty prezentacyjne z różnymi danymi i zachowaniem. Ponadto sprawia to, ż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

}

Use React Hooks and Functional Components Functional Components “referred to as Stateless Components before” are no anymore stateless. thanks to React Hooks, now you can useState hook to store state into a functional Component. or even use component lifecycle using useEffect. Functional components are easy to read and test. React Core got some other useful hooks that you can explore in Hooks Reference. The amazing thing is that you can also define your custom hooks. In the following example, we created a custom react hook called useDebounce. Which is used to limit autocomplete API calls when the input text changes.

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;

}
}