7 ráð og brellur í React

Notaðu TypeScript

Hvort sem við erum bara að tala um react eða öðrum bókasöfnum, með því að nota Tegundaskjal mun hjálpa svo mikið í viðleitninni til að halda þínum kóði skipulagt. skulum bera saman eftirfarandi JavaScript vs TypeScript við meðhöndlun props-gerða.

import PropTypes from '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...

}))
}

interface User {
firstname: String!
lastname: String!...

}

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

{user.firstname}, {user.lastname}

}

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

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

Ímyndaðu þér að hafa allt þitt gögn Skemmtur sem viðmót á einum stað og endurnýta þær í restinni af kóðanum þínum. Þetta mun ekki aðeins hjálpa þér að forðast innsláttarvillur, heldur ef þú vilt breyta skemmatri, þarft þú aðeins að breyta henni á einum stað.

Auk þess eru mörg vel þekkt JavaScript-bókasöfn að flytja yfir í TypeScript. t.d.: AdonisJS

Aðskilja framsýningareiningar og ílátseiningar

Aðskilja framsýningareiningar og ílátseiningar gerir kóðann okkar auðveldari í prófunum og skiljanlegri.

Kynningareiningar varða hvernig hlutirnir líta út. Það fær sitt gögn og hegðun frá foreldrisamhæfingareiningum.

Ílátseiningar varða hvernig hlutirnir virka. Þeir veita gögn og hegðun til kynningareininga eða annarra ílátaþátta.

Með þessari nálgun er hægt að okkur að endurnýta sömu framsetningareiningar með mismunandi gögnum og hegðun. Auk þess gerir það kóðann okkar hreinni og mun auðveldara að prófa.

Skoðaðu eftirfarandi dæmi með notendahluta sem er notaður með mismunandi ílátum sem bjóða upp á mismunandi gögn og hegðun.

function BuyerContainer() {
return 
}

function SellerContainer() {
return 
}

function UserComponent({ name, onClick }) {
return

}

Notaðu React Hooks og virknibúnaði. Virknibúnaður, sem áður var kallaður ástandslausir búnaður, er ekki lengur ástandslaus. Þökk sé React Hooks geturðu nú notað state-hookið til að geyma ástand í virknibúnaði. Eða jafnvel notað lífsferil búnaðarins með useEffect. Functional components eru auðveld í lestri og prófun. React Core inniheldur nokkra aðra gagnlega hooks sem þú getur kannað í Hooks-tilvísuninni. Það sem er magnað er að þú getur líka skilgreint þína eigin hooks. Í eftirfarandi dæmi bjuggum við til sérsniðinn react hook sem kallast useDebounce. Hann er notaður til að takmarka autocomplete. forritaskil kallar þegar inntakstexti breytist.

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 (valkvætt)
}, 1000) // 1 sekúnda

return (

{...})

}

Auk þess eru React-hakar frábær staðgengill fyrir Higher-Order Components (HoCs). Styled Component Styled Component er bókasafn sem gerir þér kleift að innleiða dýnamískan CSS á íhlutastigi á sama tíma og nýtir kosti ES. Þetta gerir íhlutina þína fyrirsjáanlegri og endurnýtanlegri. Gleymdu því að eyða of miklum tíma í að leita að réttu klasanafninu fyrir þátt á meðan þú reynir að forðast að nota það sem þegar er til. Með Styled Components tryggir þú að stílar þínir séu afmarkaðir við þættinn og að klasanafn sem búin eru til sjálfkrafa í byggingarferlinu séu notuð. Auk þess hefur það aldrei verið auðveldara að búa til dýnamískan CSS. Stílar þínir verða búnir til út frá þeim eiginleikum sem sendir eru til þættisins. Í eftirfarandi dæmi er stíll div-þáttarins bæði háður outlined-eiginleikanum og alþjóðlega þemanu.

const Wrapper = styled.div`

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

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

Síðasti punkturinn um styled-components er sá að það bætir frammistöðu með því að hlaða ekki óþarfa stílum fyrir ónotuð íhluti. Slot Fill Library gerir þér kleift að hafa skilgreint uppsetningu fyrir react-forritið þitt. Síðan viltu bæta við vígildi í hliðarstiku eingöngu fyrir ákveðna síðu. Ef þú taldir ekki með þennan möguleika frá upphafi getur það krafist mikilla breytinga á útlitinu. En með því að nota bókasafn eins og ‣ geturðu einfaldlega skilgreint Slot í Sidebar-inu. Þú fyllir svo það Slot með Widgets eingöngu fyrir ákveðnar síður. Með þessu forðast þú að þurfa að senda flags um allt components-tréð til að nálgast Sidebar-ið. Hún hefur svipaða hegðun og React Portals, sem er einnig frábær lausn fyrir tilvik eins og Modals, Tooltips…

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

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

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

{children}

const HomePage = () =>

a Page without Widjet
const DashboardPage = () =>

a Page with Widjet

Hærri stigs íhlutir Jafnvel þó React-krókar komi í stað HOC-a í flestum tilvikum. HOC-ar eru samt frábær kostur til að fela flækjustig í íhlutum, til dæmis við að útvega marga eiginleika fyrir síðuíhluti eða skilyrt útlit (einkaleiðir, hleðslustaða o.s.frv.). Eftirfarandi dæmi sýnir hvernig við getum falið flækjustigi bæði einkaleiða og sameiginlegra eiginleika síðunnar í endurnýtanlegum HOC-um sem beitt er á allar síður forritsins. Mundu að í flestum tilfellum er hægt að skipta út HoCs fyrir React Hooks og að við getum óvart yfirskrifað eiginleika í samsettum HoCs. Notið því HoCs aðeins þegar nauðsyn krefur til að halda síðuþáttum hreinum; annars notið 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
Profile Page
}
export default withPrivateRoute(withPageProps(ProfilePage))

Error Boundaries Error boundaries eru class-hlutar sem grípa allar villur/undantekningar sem kastað er í barnastigi. Þegar þær eru lýstar á efsta stigi leyfa þær þér að framkvæma rétta villumeðhöndlun með því að birta villuskilaboð og skrá villuna í vettvangseftirlitsverkfæri eins og Sentry. Á þennan hátt verðurðu fyrstur til að greina villur og reyna að laga þær áður en þær hafa áhrif á notendaupplifun. Athugið: ErrorBoundaries ætti að lýsa í class; þær styðja ekki functional components.

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
Eitthvað fór úrskeiðis! Hafðu samband við stjórnanda
;
}
return this.props.children;

}
}