Menyusun Kod dengan React Hooks dan Konteks

Apabila bekerja pada projek React berskala besar, adalah penting untuk mempunyai pangkalan kod yang teratur untuk kebolehselenggaraan dan kebolehskalaan yang lebih baik.

Dalam artikel ini, kami akan menyelami amalan terbaik untuk mengatur kod sumber anda dalam React, dengan tumpuan untuk menggunakan React Hooks dan Context.

 

Menggunakan React Hooks untuk Pengurusan Negeri

React Hooks ialah koleksi fungsi yang membolehkan anda menggunakan keadaan dan ciri React lain tanpa menggunakan kelas. Ini membantu untuk menulis kod yang lebih ringkas dan boleh dibaca. Sebagai contoh, kita boleh menggunakan useState Hook untuk mengurus keadaan dalam komponen.

Berikut adalah contoh:

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;  

 

Gabungan bahan

Salah satu faedah React ialah keupayaan untuk menggunakan semula komponen. Untuk meningkatkan organisasi, kita boleh menggunakan komponen yang lebih kecil untuk membina komponen yang lebih besar.

Ini membantu untuk memecahkan kerja dan menjadikan kod mudah diselenggara. Sebagai contoh, kami boleh mencipta <Button> komponen untuk digunakan di berbilang tempat dalam aplikasi kami:

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

 

Menggunakan Konteks untuk mengurus keadaan global

Konteks ialah mekanisme dalam React yang membolehkan kami berkongsi data antara komponen anak tanpa melalui komponen induk. Ini mengelakkan menghantar atribut data merentasi pelbagai peringkat komponen dan membantu mengurangkan kerumitan kod.

Berikut ialah contoh menggunakan Konteks untuk berkongsi bahasa semasa dalam aplikasi:

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;  

 

Di atas ialah beberapa amalan terbaik untuk mengatur kod sumber React menggunakan React Hooks dan Context.