Reagoni Këshilla — Propa, kjo lidhje dhe efektet anësore

React është një bibliotekë e njohur për krijimin e aplikacioneve në ueb dhe aplikacioneve celulare.

Në këtë artikull, ne do të shikojmë disa këshilla për të shkruar aplikacione më të mira React.

Kaloni me kusht Prop Inline te një komponent

Ne mund të kalojmë me kusht prop inline në një komponent duke kaluar në një shprehje si vlerë mbështetëse.

Për shembull, mund të shkruajmë:

<Child {...(this.props.canEdit ? { editOptions : this.state.options } : undefined)} >

Ne kontrollojmë shtyllën canEdit për të parë nëse është e vërtetë.

Nëse është, atëherë i kalojmë fëmijës në mbështetësen editOptions.

Ndryshe kaluam në undefined .

Ne përdorim operatorin spread për të përhapur objektet e kthyera në mbështetëse.

Përdorni një ose shumë grepa useEffect në një komponent React

Mund ta përdorim grepin useEffect sa herë të duam.

Për shembull, mund të shkruajmë:

useEffect(() => {
  // run code
  return () => {
    // run clean up code
  }
}, []);
useEffect(() => {
  // run code when props.foo changes
  return () => {
     // run clean up code when props.foo changes
  }
}, [props.foo])

Thirrja e parë useEffect përdoret për ekzekutimin e kodit kur ngarkohet komponenti.

Funksioni që kthejmë ekzekutohet kur komponenti çmontohet.

Në thirrjen e dytë useEffect, ne ekzekutojmë kodin kur props.foo ndryshon.

Dhe funksioni që kthehet ekzekuton kodin e pastrimit kur ndryshon props.foo.

Është i dobishëm për të shkaktuar ndonjë efekt anësor si një thirrje API ose diçka të tillë.

Kaloni objektin e vetive te komponenti fëmijë

Ne mund t'i kalojmë vetitë e një objekti tek një komponent fëmijë duke përdorur operatorin e përhapjes së objektit.

Për shembull, mund të shkruajmë:

return <Child {...props} />;

Të gjitha vetitë në objektin props do të kalohen në Child si mbështetëse.

Shmangni lidhjen e 'këtë' me çdo metodë

Ne mund të shmangim lidhjen e të gjitha metodave tona me this duke përdorur fushat e klasës.

Kjo nuk është pjesë e sintaksës JavaScript, por mund të përdoret me Babel ose TypeScript.

Për shembull, ne mund të lidhim:

class Foo extends React.Component {
  onClick = () => {
    console.log('clicked');
  };
  onMouseOver = () => {
    console.log('mouse over');
  };
  render() {
    return (
      <div
        onClick={this.onClick}
        onMouseOver={this.onMouseOver}
      />
    );
  }
}

Është ende në Fazën 3, kështu që nuk është përfundimtar.

Metoda Push në React Hooks

Ne nuk mund të përdorim metodën push për të shtuar një artikull në një grup pasi ajo kthen artikullin që është bashkangjitur dhe ndryshon grupin në vend.

Në vend të kësaj, ne duhet të kthejmë një grup të ri me artikullin që duam të shtojmë.

Për shembull, mund të shkruajmë:

const [array, setArray] = useState(initialArray);

Pastaj shkruajmë:

setArray(oldArray => [...oldArray, newItem]);

Ne marrim grupin e vjetër dhe kthejmë një grup të ri me artikujt e bashkangjitur.

Artikujt ekzistues shpërndahen në grupin e ri me operatorin spread.

PropTypes Kontrolloni objektin me çelësat dinamikë

Ne mund të përdorim një funksion për të kontrolluar një objekt me çelësa dinamikë kur vërtetojmë mbështetësit.

Për shembull, mund të shkruajmë:

someProp: (props, propName, componentName) => {
  if (!/match/.test(props[propName])) {
    return new Error('match prop doesn't exist');
  }
}

Ne kontrollojmë nëse vlera e someProp nëse vlera e someProp përputhet me modelin regex që kemi specifikuar.

Nëse nuk ndodh, atëherë ne hedhim një gabim.

props ka rekuizitën si objekt.

propName ka emrin e mbështetëses.

componentName ka emrin e komponentit.

Reagojnë Llojet e props: objekti vs formë

Metodat e metodës objectOf na lejojnë të kontrollojmë nëse një vlerë mbështetëse është e një lloji të caktuar.

Për shembull, mund të shkruajmë:

number: PropTypes.objectOf(PropTypes.number)

për të kontrolluar nëse vlera e shtyllës number është një objekt.

Nga ana tjetër, shape na lejon të kontrollojmë strukturën e një objekti.

Për shembull, mund të shkruajmë:

styleObj: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
}),

Atëherë mbështetësi styleObj duhet të ketë veçorinë color, që është një varg.

Dhe duhet të ketë një pronë fontSize që është një numër.

konkluzioni

Ka mënyra të ndryshme për të kontrolluar formën e një objekti që kalojmë si mbështetëse.

Ne mund t'i kalojmë vetitë në një objekt opsionalisht duke specifikuar një shprehje treshe.

Gjithashtu, ne mund të përdorim useEffect shumë herë në komponentin tonë.

Çelësat dinamikë mund të kontrollohen gjithashtu me funksione të personalizuara me paketën prop-types.