7 padomi un triki programmā React

Izmantojiet TypeScript

Neatkarīgi no tā, vai mēs runājam tikai par reaģēt vai citas bibliotēkas, izmantojot Mašīnraksts ļoti palīdzēs jūsu centienos saglabāt jūsu kods organizēta. salīdzināsim Javascript vs Typescript, kas attiecas uz rekvizītu tipiem.

importēt PropTypes no 'prop-types'

funkcija UserCard({ user }) {
return

{user.name}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
vārds: PropTypes.string.isRequired,
uzvārds: PropTypes.string.isRequired
...
})
}

funkcija UserList({ users }) {
return

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

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
vārds: PropTypes.string.isRequired,
uzvārds: PropTypes.string.isRequired
...
}))
}

interfeiss Lietotājs {
vārds: String!
uzvārds: String!
...
}

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

{user.name}, {user.lastname}

}

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

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

Iedomājieties, ka visi jūsu dati shēmas kā saskarnes vienā vietā un atkārtoti izmantot tās visā pārējā kodā. Tas ne tikai palīdzēs jums izvairīties no pārrakstīšanās kļūdām, bet arī gadījumā, ja vēlaties mainīt shēmu, to vajadzētu mainīt tikai vienā vietā.

Turklāt daudzas labi zināmas javascript bibliotēkas pāriet uz Typescript, piemēram: AdonisJS

Atsevišķi prezentācijas un konteinera komponenti

Atdalot prezentācijas un konteineru komponentus, mūsu kodu ir vieglāk testēt un pamatot.

Prezentācijas komponenti attiecas uz kā viss izskatās. Tā saņem savu dati un uzvedība no māteskomponentiem.

Konteinera sastāvdaļas attiecas uz kā lietas darbojas. Tie nodrošina dati un uzvedība uz prezentācijas vai citām konteinera sastāvdaļām.

Izmantojot šo pieeju, var mums atkārtoti izmantot vienas un tās pašas prezentācijas komponentes ar dažādiem datiem un uzvedību. Turklāt tas padara mūsu kodu tīrāku un daudz vieglāk testējamu.

Aplūkojiet šādu piemēru ar lietotāja komponenti, kas tiek izmantota ar dažādiem konteineriem, kuri nodrošina dažādus datus un uzvedību.

funkcija BuyerContainer() {
return
}

funkcija SellerContainer() {
return
}

funkcija UserComponent({ name, onClick }) {
return

}

Izmantojiet React Hooks un funkcionālās komponentes Funkcionālās komponentes, kas iepriekš tika dēvētas par bezstāvokļa komponentēm, vairs nav bezstāvokļa komponentes. pateicoties React Hooks, tagad jūs varat izmantotState Hook, lai saglabātu stāvokli funkcionālajā komponentē, vai pat izmantot komponenta dzīves ciklu, izmantojot useEffect. Funkcionālās komponentes ir viegli lasāmas un testējamas. React Core ir vēl daži citi noderīgi āķi, kurus varat izpētīt Hooks Reference. Pārsteidzošā lieta ir tā, ka jūs varat arī definēt savus pielāgotus āķus. Šajā piemērā mēs izveidojām pielāgotu react āķi ar nosaukumu useDebounce. Tas tiek izmantots, lai ierobežotu automātiskās papildināšanas API izsaukumus, kad mainās ievades teksts.

importēt { useEffect } no 'react';
import { debounce } no 'lodash';
eksportēt noklusējuma funkciju useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => () => debounced.cancel(), [ debounced ] );
return debounced;
}
eksportēt noklusējuma funkciju SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (pēc izvēles)
}, 1000) // 1 sekunde

return (

{...}
)
}

Turklāt React āķi ir lielisks augstākās kārtas komponentu (HoC) aizstājējs. Stilizētā komponente Stilizētā komponente ir bibliotēka, kas ļauj ieviest dinamisko CSS komponentu līmenī, vienlaikus izmantojot ES priekšrocības. Tā padara jūsu komponentus paredzamākus un atkārtoti izmantojamus. Aizmirstiet par pārāk ilgas laika tērēšanu, meklējot pareizo klases nosaukumu elementam, vienlaikus cenšoties izvairīties no jau esošas klases nosaukuma izmantošanas. Izmantojot stilizētās komponentes, nodrošiniet, ka jūsu stili ir attiecināti uz komponentu un automātiski ģenerētajiem klašu nosaukumiem izveides posmā. Turklāt vēl nekad nav bijis vieglāk izveidot dinamisku CSS. jūsu stili tiks ģenerēti atbilstoši komponentei nodotajiem rekvizītiem. Nākamajā piemērā div stils ir atkarīgs gan no iezīmētā rekvizīta, gan no globālās tēmas.

const Wrapper = styled.div`

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

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

Pēdējais punkts par stilizētajiem komponentiem ir tas, ka tas uzlabo veiktspēju, jo netiek ielādēti lieki neizmantoto komponentu stili. Slot Fill Library Pieņemsim, ka esat definējis savas react lietojumprogrammas izkārtojumu, tad vēlaties pievienot logrīku sānjoslā tikai konkrētai lapai. Ja šo gadījumu neesat apsvēris jau sākumā, tas var prasīt lielas izmaiņas izkārtojumā. Bet, izmantojot tādu bibliotēku kā ‣ Jūs varat vienkārši definēt slotu sānjoslā. Tad aizpildiet šo slotu ar logrīkiem tikai konkrētām lapām. tādā veidā jūs izvairīsieties no karodziņu nodošanas visā komponentu kokā, lai piekļūtu sānu joslai. Tam ir līdzīga uzvedība kā React portāliem, kas arī ir lielisks risinājums tādiem gadījumiem kā Modals, Tooltips...

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

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

];
const Page = ({bērni}) =>

{children}

const HomePage = () =>

lapa bez Widjet
const DashboardPage = () =>

lapa ar Widjet

Augstākas kārtas komponenti Pat ja React āķi vairumā gadījumu aizstāj HOC. HoC joprojām ir lieliska izvēle attiecībā uz komponentu sarežģītības slēpšanu, piemēram, vairāku rekvizītu nodrošināšanu lappušu komponentiem vai nosacītu atveidošanu (privātie maršruti, ielādes statuss ...). Nākamais piemērs ilustrē, kā mēs varam iekapsulēt gan privāto maršrutu, gan lappušu kopīgo rekvizītu sarežģītību atkārtoti lietojamos HoC, ko piemēro visām lietojumprogrammas lapām. Paturiet prātā, ka lielāko daļu HoCs gadījumu var aizstāt ar React Hooks un ka mēs varam kļūdas pēc pārrakstīt rekvizītus, veidojot HoCs. Tāpēc, lūdzu, izmantojiet HoCs tikai tad, ja tas ir nepieciešams, lai lapas komponenti būtu tīrāki. pretējā gadījumā izmantojiet React Hooks.

funkcija withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
};
}
funkcija withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
funkcija ProfilePage({ navigācija, currentPath, currentUser}) {
return
Profila lapa
}
export default withPrivateRoute(withPageProps(ProfilePage))

Kļūdu robežas Kļūdu robežas ir klases komponenti, kas pārtver visas kļūdas/izņēmumus, kas tiek izmesti bērnu līmenī. Ja tās ir deklarētas augstākajā līmenī, tās ļauj veikt pienācīgu kļūdu apstrādi, parādot kļūdas ziņojumu un reģistrējot kļūdu platformas uzraudzības rīkā, piemēram, Sentry. Šādā veidā jūs būsiet pirmais, kā pamanīt kļūdas, un mēģināsiet tās novērst, pirms tās ietekmē lietotāja pieredzi. Piezīme: ErrorBoundaries jādeklarē klasē, kas neatbalsta funkcionālos komponentus.

klase ErrorBoundary paplašina 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
Kaut kas notika nepareizi ! Sazinieties ar administratoru
;
}
return this.props.children;

}
}