Cód Eagraithe le Hooks Imoibríocha agus Comhthéacs

Agus tú ag obair ar thionscadail mhórscála React, tá sé ríthábhachtach bunachar cód dea-eagraithe a bheith ann le haghaidh inchothaitheachta agus inscálaithe níos fearr.

San Airteagal seo, déanfaimid na cleachtais is fearr chun do chód foinse a eagrú in React, le fócas ar úsáid a bhaint as Hooks React and Context.

Úsáid Hooks React do Bhainistíocht Stáit

Is bailiúchán feidhmeanna iad React Hooks a ligeann duit gnéithe stáit agus gnéithe React eile a úsáid gan ranganna a úsáid. Cuidíonn sé seo le cód níos gonta agus níos inléite a scríobh. Mar shampla, is féidir linn an useState Hook a úsáid chun staid a bhainistiú i gcomhpháirt.

Seo sampla:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

Teaglaim na gcomhábhar

Ceann de na buntáistí a bhaineann le React ná an cumas comhpháirteanna a athúsáid. Chun an eagraíocht a mhéadú, is féidir linn comhpháirteanna níos lú a úsáid chun comhpháirteanna níos mó a thógáil.

Cuidíonn sé seo leis an obair a bhriseadh síos agus an cód a dhéanamh éasca le cothabháil. Mar shampla, is féidir linn <Button> comhpháirt a chruthú le húsáid in áiteanna éagsúla inár bhfeidhmchlár:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

Ag Úsáid Comhthéacs chun staid dhomhanda a bhainistiú

Is meicníocht é Comhthéacs in React a ligeann dúinn sonraí a roinnt idir comhpháirteanna leanaí gan dul trí chomhpháirtí tuismitheora. Seachnaíonn sé seo tréithe sonraí a aistriú thar leibhéil iolracha comhpháirteanna agus cuidíonn sé le castacht na gcód a laghdú.

Seo sampla de Context a úsáid chun an teanga reatha a roinnt san fheidhmchlár:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

Thuas tá roinnt dea-chleachtais maidir le cód foinse React a eagrú ag baint úsáide as React Hooks and Context.