close

Lambar Tsara tare da React Hooks da Magana

Lokacin aiki akan manyan ayyukan React, yana da mahimmanci a sami ingantaccen tsarin codebase don ingantaccen kiyayewa da haɓakawa.

A cikin wannan labarin, za mu nutse cikin mafi kyawun ayyuka don tsara lambar tushe a cikin React, tare da mai da hankali kan amfani da React Hooks da Ma'anar.

 

Amfani da React Hooks don Gudanar da Jiha

React Hooks tarin ayyuka ne waɗanda ke ba ku damar amfani da jihar da sauran fasalulluka na React ba tare da amfani da azuzuwan ba. Wannan yana taimakawa wajen rubuta ƙarin taƙaitacciyar lambar da za a iya karantawa. Misali, za mu iya amfani da ƙugiya ta amfani da Jiha don sarrafa jihohi a cikin wani yanki.

Ga misali:

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;

 

Haɗuwa da sinadaran

Ɗaya daga cikin fa'idodin React shine ikon sake amfani da abubuwan da aka gyara. Don haɓaka ƙungiya, za mu iya amfani da ƙananan sassa don gina manyan sassa.

Wannan yana taimakawa wajen rushe aikin da kuma sanya code cikin sauƙi don kiyayewa. Misali, za mu iya ƙirƙirar <Button> abin da za mu yi amfani da shi a wurare da yawa a cikin aikace-aikacen mu:

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

 

Amfani da Context don sarrafa yanayin duniya

Ma'anar wani tsari ne a cikin React wanda ke ba mu damar raba bayanai tsakanin kayan aikin yara ba tare da wucewa ta abubuwan haɗin iyaye ba. Wannan yana guje wa wucewar sifofin bayanai a cikin matakan sassa da yawa kuma yana taimakawa rage rikitaccen lamba.

Ga misali na amfani da Magana don raba yaren yanzu a cikin aikace-aikacen:

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;

 

A sama akwai wasu mafi kyawun ayyuka don tsara lambar tushe ta React ta amfani da React Hooks da Context.