React Render Props: Komponentu loģikas koplietošanas apgūšana

React izstrādes pasaulē komponentu kompozīcija ir stūrakmens mērogojamu un uzturējamu lietotņu veidošanai. Lai gan augstākas kārtas komponenti (HOCs) kādreiz bija izplatīts modelis loģikas koplietošanai, render props piedāvā elastīgāku un skaidrāku pieeju. Šī visaptverošā rokasgrāmata iedziļinās render props niansēs, pētot to priekšrocības, pielietojuma gadījumus un labākās prakses efektīvai komponentu loģikas koplietošanai.

Kas ir render props?

Render prop ir tehnika koda koplietošanai starp React komponentiem, izmantojot prop, kura vērtība ir funkcija. Šī funkcija saņem stāvokli kā argumentu un atgriež React elementu. Vienkāršāk sakot, render prop ir funkcijas prop, ko komponents izmanto, lai zinātu, ko renderēt.

Tā vietā, lai renderēšanas loģiku iekodētu komponentā, mēs šo atbildību deleģējam vecākkomponentam, izmantojot funkciju. Šī kontroles inversija nodrošina lielāku elastību un atkārtotu izmantojamību.

Pamatkoncepcija

Galvenā ideja aiz render props ir tāda, ka komponents ar render prop saņem funkciju, kas saņem stāvokli, kas nepieciešams renderēšanai, un pēc tam atgriež faktisko React elementu, kas jārenderē. Tas ļauj komponentam koplietot savu stāvokļa loģiku, vienlaikus ļaujot vecākkomponentam kontrolēt renderēšanu.

Šeit ir pamata piemērs, lai ilustrētu šo koncepciju:

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({x: event.clientX, y: event.clientY });
  }

  render() {
    return (
      

        {this.props.render(this.state)}
      
    );
  }
}

function App() {
  return (
    

      
Move the mouse around!
       (
        
The current mouse position is ({mouse.x}, {mouse.y})
      )}/>
    
  );
}

Šajā piemērā `Mouse` komponents seko peles pozīcijai un nodod to vecākkomponentam, izmantojot `render` prop. Vecākkomponents pēc tam izmanto šos datus, lai renderētu peles koordinātas uz ekrāna.

Render Props izmantošanas priekšrocības

Render props piedāvā vairākas priekšrocības salīdzinājumā ar citiem komponentu loģikas koplietošanas modeļiem, piemēram, augstākas kārtas komponentiem (HOCs) un mixins:

• Skaidra datu plūsma: Render props padara datu plūsmu skaidrāku un vieglāk saprotamu. Komponents, kas saņem stāvokli, ir skaidri definēts, samazinot neparedzētu blakusefektu risku.
• Uzlabota kompozīcijas spēja: Render props veicina labāku komponentu kompozīciju. Jūs varat viegli apvienot vairākus render props, lai izveidotu sarežģītus un atkārtoti lietojamus komponentus.
• Paaugstināta elastība: Render props piedāvā lielāku elastību renderēšanas loģikas ziņā. Vecākkomponentam ir pilnīga kontrole pār to, kā stāvoklis tiek renderēts, ļaujot izveidot ļoti pielāgotus lietotāja interfeisus.
• Samazināta prop "urbšana": Render props var palīdzēt samazināt prop "urbšanu" (prop drilling), kur dati tiek nodoti cauri vairākiem komponentu slāņiem. Nodrošinot nepieciešamo stāvokli tieši patērējošajam komponentam, jūs varat izvairīties no nevajadzīgu props nodošanas.
• Labāka veiktspēja: Dažos gadījumos render props var nodrošināt labāku veiktspēju salīdzinājumā ar HOCs, jo tie izvairās no starpkomponentu izveides.

Render Props pielietojuma gadījumi

Render props ir īpaši piemēroti scenārijiem, kur nepieciešams koplietot stāvokļa loģiku starp komponentiem, tos cieši nesaistot. Šeit ir daži izplatīti pielietojuma gadījumi:

• Peles kustības izsekošana: Kā parādīts iepriekšējā piemērā, render props var izmantot, lai izsekotu peles kustības un nodotu koordinātas citiem komponentiem.
• Ritināšanas pozīcija: Jūs varat izveidot komponentu, kas seko līdzi konteinera ritināšanas pozīcijai un sniedz šo informāciju citiem komponentiem, lai ieviestu tādas funkcijas kā paralakses ritināšana vai bezgalīgā ritināšana.
• Datu ielāde: Render props var izmantot, lai iekapsulētu datu ielādes loģiku un nodotu ielādes stāvokli, kļūdas stāvokli un datus citiem komponentiem. Tas ir īpaši noderīgi, lai deklaratīvā veidā pārvaldītu asinhronas operācijas.
• Autentifikācija: Jūs varat izveidot `AuthProvider` komponentu, kas pārvalda lietotāja autentifikācijas stāvokli un sniedz šo informāciju citiem komponentiem, izmantojot render prop. Tas ļauj jums viegli kontrolēt piekļuvi dažādām lietotnes daļām, pamatojoties uz lietotāja autentifikācijas statusu.
• Formu apstrāde: Render props var izmantot, lai izveidotu atkārtoti lietojamus formu komponentus, kas apstrādā formas iesniegšanu, validāciju un stāvokļa pārvaldību. Tas var ievērojami vienkāršot sarežģītu formu veidošanas procesu React.
• Mediju vaicājumi: Komponents, kas seko līdzi loga izmēram un nodrošina Būla vērtības atkarībā no atbilstošiem mediju vaicājumiem, var būt ļoti noderīgs adaptīvam dizainam.

Izplatīti Render Prop modeļi

Ir parādījušies vairāki izplatīti modeļi efektīvai render props izmantošanai. Šo modeļu izpratne var palīdzēt jums rakstīt tīrāku un uzturējamāku kodu.

"children" Prop kā funkcija

Tā vietā, lai izmantotu prop ar nosaukumu `render`, jūs varat izmantot arī `children` prop kā funkciju. Tas ir izplatīts modelis, kas padara komponenta lietošanu intuitīvāku.

class DataProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true, error: null };
  }

  componentDidMount() {
    // Simulate data fetching
    setTimeout(() => {
      this.setState({ data: { message: "Data fetched successfully!" }, loading: false });
    }, 1000);
  }

  render() {
    return this.props.children(this.state);
  }
}

function App() {
  return (
    
      {({ data, loading, error }) => {
        if (loading) return 
Loading...
;
        if (error) return 
Error: {error.message}
;
        return 
{data.message}
;
      }}
    
  );
}

Šajā piemērā `DataProvider` komponents izmanto `children` prop kā funkciju, lai renderētu savu saturu, pamatojoties uz datu ielādes stāvokli.

"component" Prop

Vēl viens modelis ir izmantot `component` prop, kas pieņem React komponentu. Render prop pēc tam renderē šo komponentu, nododot stāvokli kā props.

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    return (
      

        
      
    );
  }
}

function MouseDisplay(props) {
  return 
The mouse position is ({props.x}, {props.y})
;
}

function App() {
  return (
    

      
Move the mouse around!
      
    
  );
}

Šis modelis ļauj jums viegli pārslēgties starp dažādiem renderēšanas komponentiem, nemainot pašu `Mouse` komponentu.

Render Props pret augstākas kārtas komponentiem (HOCs)

Gan render props, gan HOCs ir tehnikas loģikas koplietošanai starp React komponentiem. Tomēr tām ir dažādi kompromisi. Šeit ir salīdzinājums:

Iezīme	Render Props	Augstākas kārtas komponenti (HOCs)
Datu plūsma	Skaidra	Netieša
Kompozīcijas spēja	Izcila	Var novest pie "ietinēju elles"
Elastība	Augsta	Ierobežota
Lasāmība	Labāk lasāms	Var būt grūtāk lasāms
Veiktspēja	Potenciāli labāka	Var ieviest nevajadzīgus komponentus

Kopumā render props bieži tiek dota priekšroka pār HOCs to skaidrās datu plūsmas, uzlabotās kompozīcijas spējas un paaugstinātās elastības dēļ. Tomēr HOCs joprojām var būt noderīgi noteiktās situācijās, piemēram, kad nepieciešams pievienot komponentam globālu funkcionalitāti.

Labākās prakses Render Props izmantošanai

Lai maksimāli izmantotu render props, ievērojiet šīs labākās prakses:

• Vienkāršība: Izvairieties no pārāk sarežģītu render props izveides. Ja render prop kļūst pārāk liels vai grūti saprotams, apsveriet iespēju to sadalīt mazākos, vieglāk pārvaldāmos komponentos.
• Lietojiet jēgpilnus nosaukumus: Izvēlieties aprakstošus nosaukumus saviem render props. Tas padarīs jūsu kodu vieglāk lasāmu un saprotamu. Piemēram, izmantojiet `render` vai `children` vispārīgu nosaukumu, piemēram, `prop`, vietā.
• Dokumentējiet savus Render Props: Skaidri dokumentējiet savu render props mērķi un lietojumu. Tas palīdzēs citiem izstrādātājiem saprast, kā efektīvi izmantot jūsu komponentus.
• Apsveriet TypeScript: TypeScript lietošana var palīdzēt laikus atklāt kļūdas un uzlabot koda kopējo kvalitāti. TypeScript var arī palīdzēt dokumentēt jūsu render props, definējot props tipus un render funkcijas atgrieztā tipa veidu.
• Testējiet savus Render Props: Rūpīgi testējiet savus render props, lai nodrošinātu, ka tie darbojas pareizi. Tas ietver dažādu komponenta stāvokļu un dažādu render funkcijas izmantošanas veidu testēšanu.

Progresīvas tehnikas un apsvērumi

Context izmantošana ar Render Props

Render props var apvienot ar React Context API, lai koplietotu datus visā komponentu kokā bez prop "urbšanas". Jūs varat izmantot render prop, lai nodrošinātu konteksta vērtību un pēc tam to patērēt bērnu komponentos.

const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { theme: 'light' };
  }

  toggleTheme = () => {
    this.setState(prevState => ({ theme: prevState.theme === 'light' ? 'dark' : 'light' }));
  };

  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

function ThemedButton() {
  return (
    
      {({ theme, toggleTheme }) => (
        
          Toggle Theme
        
      )}
    
  );
}

function App() {
  return (
    
      
    
  );
}

Veiktspējas optimizācija

Lai gan render props var uzlabot veiktspēju, izvairoties no nevajadzīgas komponentu izveides, ir svarīgi apzināties iespējamos veiktspējas vājos punktus. Izvairieties no jaunu funkciju izveides render prop funkcijā, jo tas var izraisīt nevajadzīgas pārrenderēšanas. Tā vietā definējiet funkciju ārpus render prop un nododiet to kā prop.

Pieejamības apsvērumi

Lietojot render props, noteikti ņemiet vērā pieejamību. Nodrošiniet, lai jūsu komponenti būtu pieejami lietotājiem ar invaliditāti, nodrošinot atbilstošus ARIA atribūtus un tastatūras navigāciju. Piemēram, ja jūsu render prop veido interaktīvus elementus, nodrošiniet, ka tiem var piekļūt ar fokusu un tiem ir atbilstoši apzīmējumi.

Piemēri no visas pasaules

Komponentu loģikas koplietošanas un atkārtotas izmantošanas principi ir universāli, bet konkrētie pielietojumi var atšķirties atkarībā no kultūras un reģionālajiem kontekstiem. Šeit ir daži hipotētiski piemēri:

• E-komercijas platforma (globāla): Render prop varētu apstrādāt valūtas konvertāciju, pamatojoties uz lietotāja atrašanās vietu. Tas nodrošina, ka cenas tiek rādītas atbilstošajā valūtā, uzlabojot lietotāja pieredzi. `CurrencyConverter` komponents pārvaldītu konversijas kursus un nodrošinātu konvertēto cenu renderēšanas komponentam.
• Valodu apguves lietotne (vairākas valodas): Render prop varētu pārvaldīt lokalizēta teksta iegūšanu, pamatojoties uz lietotāja izvēlēto valodu. Tas ļauj lietotnei rādīt saturu lietotāja vēlamajā valodā, uzlabojot viņu mācīšanās pieredzi. `LocalizationProvider` ielādētu un nodrošinātu pareizos tulkojumus.
• Tiešsaistes rezervēšanas sistēma (starptautiski ceļojumi): Render prop varētu apstrādāt laika joslu konversijas, lai plānotu tikšanās vai tikšanās dažādās laika joslās. `TimeZoneConverter` pārvaldītu laika joslu nobīdes un nodrošinātu konvertēto laiku renderēšanas komponentam.
• Sociālo mediju platforma (dažādas kultūras): Render prop varētu pārvaldīt datuma un laika formātu attēlošanu atbilstoši kultūras paražām. Dažās kultūrās datums tiek attēlots kā MM/DD/GGGG, bet citās - DD/MM/GGGG. `DateTimeFormatter` apstrādātu atbilstošo formatēšanu.

Šie piemēri parāda, kā render props var izmantot, lai izveidotu komponentus, kas ir pielāgojami dažādiem kultūras un reģionālajiem kontekstiem, nodrošinot personalizētāku un atbilstošāku lietotāja pieredzi.

Noslēgums

Render props ir spēcīga tehnika loģikas koplietošanai starp React komponentiem. Izprotot to priekšrocības, pielietojuma gadījumus un labākās prakses, jūs varat veidot uzturējamākas, mērogojamākas un elastīgākas React lietotnes. Lai gan mūsdienu React izstrāde lielā mērā balstās uz Hooks, Render Props izpratne sniedz vērtīgu pamatu komponentu kompozīcijas un loģikas atkārtotas izmantošanas principu apguvei, kas joprojām ir spēkā neatkarīgi no konkrētās izmantotās tehnoloģijas.

Izmantojiet render props spēku un atklājiet jaunas komponentu kompozīcijas iespējas savos React projektos!