Kupanga Kanuni na Hooks React na Muktadha

Unapofanya kazi kwenye miradi mikubwa ya React, ni muhimu kuwa na msingi wa kanuni uliopangwa vizuri kwa udumishaji bora na upunguzaji.

Katika makala haya, tutazama katika mbinu bora zaidi za kupanga msimbo wako wa chanzo katika React, tukilenga kutumia React Hooks na Muktadha.

 

Kutumia Hook za React kwa Usimamizi wa Jimbo

React Hooks ni mkusanyiko wa vitendakazi vinavyokuruhusu kutumia hali na vipengele vingine vya React bila kutumia madarasa. Hii husaidia kuandika msimbo mafupi zaidi na unaosomeka. Kwa mfano, tunaweza kutumia useState Hook kudhibiti hali katika kipengele.

Hapa kuna mfano:

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;  

 

Mchanganyiko wa viungo

Moja ya faida za React ni uwezo wa kutumia tena vipengele. Ili kuongeza mpangilio, tunaweza kutumia vijenzi vidogo kuunda vijenzi vikubwa.

Hii husaidia kuvunja kazi na kufanya nambari iwe rahisi kudumisha. Kwa mfano, tunaweza kuunda <Button> kijenzi cha kutumia katika sehemu nyingi katika programu yetu:

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

 

Kutumia Muktadha kudhibiti hali ya kimataifa

Muktadha ni utaratibu katika React unaoturuhusu kushiriki data kati ya vipengele vya watoto bila kupitia vipengele vya mzazi. Hii huepuka kupitisha sifa za data katika viwango vya vipengele vingi na husaidia kupunguza utata wa msimbo.

Huu hapa ni mfano wa kutumia Muktadha kushiriki lugha ya sasa katika programu:

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;  

 

Hapo juu ni baadhi ya mbinu bora za kupanga msimbo wa chanzo wa React kwa kutumia React Hooks na Muktadha.