7 tipů a triků v aplikaci React

Použijte TypeScript

Ať už mluvíme jen o reagovat nebo jiných knihoven pomocí Typescript vám velmi pomůže v úsilí o udržení vaší kód organizované. porovnejme následující Javascript vs Typescript pracující s typy rekvizit.

import PropTypes z 'prop-types'

function UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
jméno: PropTypes.string.isRequired,
příjmení: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

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

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
jméno: PropTypes.string.isRequired,
příjmení: PropTypes.string.isRequired
...
}))
}

rozhraní User {
jméno: String!
příjmení: String!
...
}

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

{user.firstname}, {user.lastname}

}

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

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

Představte si, že máte všechna datová schémata jako rozhraní na jednom místě a opakovaně je používáte ve všech ostatních částech kódu. To vám nejen pomůže vyhnout se chybám při psaní, ale také v případě, že budete chtít schéma změnit, měli byste ho změnit pouze na jediném místě.

Kromě toho na Typescript přechází mnoho známých javascriptových knihoven, např: AdonisJS

Oddělené prezentační a kontejnerové komponenty

Oddělení prezentačních a kontejnerových komponent usnadňuje testování a zdůvodňování našeho kódu.

Prezentační prvky se týkají jak věci vypadají. Obdrží ji data a chování z nadřazených komponent.

Součásti kontejneru se týkají jak věci fungují. Poskytují data a chování na prezentační nebo jiné součásti kontejneru.

Použití tohoto přístupu umožňuje nás opakovaně používat stejné prezentační komponenty s různými daty a chováním. Kromě toho je díky tomu náš kód čistší a mnohem snadněji se testuje.

Podívejte se na následující příklad s User Component, který se používá s různými kontejnery, které poskytují různá data a chování.

funkce BuyerContainer() {
return
}

funkce SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Použijte React Háčky a funkční komponenty Funkční komponenty "dříve označované jako bezstavové komponenty" již nejsou bezstavové. díky React Hooks můžete nyní pomocí háčkuState uložit stav do funkční komponenty. nebo dokonce použít životní cyklus komponenty pomocí useEffect. Funkční komponenty se snadno čtou a testují. Jádro React dostalo několik dalších užitečných háčků, které můžete prozkoumat v Referenci háčků. Úžasné je, že si můžete definovat i vlastní háčky. V následujícím příkladu jsme vytvořili vlastní háček react s názvem useDebounce. Který se používá k omezení volání API automatického dokončování při změně vstupního textu.

import { useEffect } z 'react';
import { debounce } z 'lodash';
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
export default funkce SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (nepovinné)
}, 1000) // 1 sec

return (

{...}
)
}

Kromě toho jsou háčky React skvělou náhradou za komponenty vyššího řádu (HoC). Styled Component Styled Component je knihovna umožňující zavedení dynamického CSS na úrovni komponent. a zároveň využívá výhod ES. Díky ní jsou vaše komponenty předvídatelnější a opakovaně použitelné. Zapomeňte na to, že byste ztráceli příliš mnoho času hledáním správného názvu třídy pro prvek a zároveň se snažili vyhnout použití již existující třídy. Pomocí Styled Components zajistíte, aby byly vaše styly rozprostřeny na komponentu a automaticky generované názvy tříd v kroku sestavení. Kromě toho nikdy nebylo snazší vytvářet dynamické CSS. vaše styly budou generovány podle rekvizit předaných komponentě. V následujícím příkladu je styl div závislý jak na načrtnuté rekvizitě, tak na globálním tématu.

const Wrapper = styled.div`

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

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

Poslední bod týkající se stylových komponent je, že Zlepšuje výkon tím, že nenačítá zbytečné styly nepoužívaných komponent. Slot Fill Library Předpokládejme, že jste definovali rozvržení aplikace react. pak chcete přidat widget do postranního panelu pouze pro určitou stránku. Pokud jste tento případ nezvážili od začátku Může to vyžadovat velkou změnu rozvržení. Ale pomocí knihovny, jako je ‣ Stačí definovat slot na postranním panelu. Pak tento slot naplňte widgety pouze pro konkrétní stránky. tím se vyhnete předávání příznaků po celém stromu komponent pro přístup k postrannímu panelu. Má to podobné chování jako React Portály, což je také skvělé řešení pro případy, jako jsou Modály, Tooltipy...

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 = () =>

a Page bez Widjet
const DashboardPage = () =>

stránka s Widjetem

Komponenty vyššího řádu I když háčky React ve většině případů nahrazují HOC. HoC jsou stále skvělou volbou, pokud jde o skrytí složitosti komponent, jako je poskytování více rekvizit komponentám stránky nebo podmíněné vykreslování (soukromé trasy, stav načítání ...) Následující příklad ilustruje, jak můžeme zapouzdřit složitost soukromých tras i společných rekvizit stránky do opakovaně použitelných HoC aplikovaných na všechny stránky aplikace. Mějte na paměti, že většinu případů HoCs lze nahradit háčky React. a že můžeme omylem přepsat rekvizity složenými HoCs. Proto HoCs používejte jen v případě, že je to nutné, abyste udrželi komponenty stránky v čistotě. v opačném případě používejte React Hooks.

funkce withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigace, currentPath, currentUser}) {
return
Stránka profilu
}
export default withPrivateRoute(withPageProps(ProfilePage))

Hranice chyb Hranice chyb jsou komponenty třídy, které zachycují všechny chyby/výjimky hozené na úrovni dětí. Pokud jsou deklarovány na nejvyšší úrovni, umožní vám provést správné ošetření chyb zobrazením chybové zprávy a zaznamenáním chyby v nástroji pro monitorování platformy, jako je Sentry. Tímto způsobem budete první, jak chyby zachytit, a pokusíte se je opravit dříve, než ovlivní uživatelské prostředí. Poznámka: ErrorBoundaries by měly být deklarovány u tříd, které nepodporují funkční komponenty.

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
Něco se pokazilo ! Kontaktujte správce
;
}
return this.props.children;

}
}