การจัดระเบียบโค้ดด้วย React Hooks และบริบท

เมื่อทำงานในโครงการ React ขนาดใหญ่ สิ่งสำคัญคือต้องมีฐานโค้ดที่มีการจัดระเบียบอย่างดีเพื่อการบำรุงรักษาและความสามารถในการปรับขนาดที่ดียิ่งขึ้น

ในบทความนี้ เราจะเจาะลึกแนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดระเบียบซอร์สโค้ดของคุณใน React โดยเน้นที่การใช้ React Hooks และบริบท

 

การใช้ React Hooks เพื่อการจัดการสถานะ

React Hooks คือชุดของฟังก์ชันที่ให้คุณใช้สถานะและฟีเจอร์ React อื่นๆ โดยไม่ต้องใช้คลาส ซึ่งช่วยให้เขียนโค้ดได้กระชับและอ่านง่ายขึ้น ตัวอย่างเช่น เราสามารถใช้ useState Hook เพื่อจัดการสถานะในส่วนประกอบ

นี่คือตัวอย่าง:

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;  

 

การผสมผสานของส่วนผสม

ข้อดีอย่างหนึ่งของ React คือความสามารถในการนำส่วนประกอบกลับมาใช้ใหม่ เพื่อเพิ่มองค์กร เราสามารถใช้ส่วนประกอบที่เล็กลงเพื่อสร้างส่วนประกอบที่ใหญ่ขึ้น

สิ่งนี้ช่วยแบ่งงานและทำให้โค้ดง่ายต่อการบำรุงรักษา ตัวอย่างเช่น เราสามารถสร้าง <Button> ส่วนประกอบเพื่อใช้ในหลายๆ ที่ในแอปพลิเคชันของเรา:

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

 

การใช้บริบทเพื่อจัดการสถานะส่วนกลาง

บริบทเป็นกลไกใน React ที่ช่วยให้เราสามารถแบ่งปันข้อมูลระหว่างองค์ประกอบลูกโดยไม่ต้องผ่านองค์ประกอบหลัก วิธีนี้จะหลีกเลี่ยงการส่งผ่านแอตทริบิวต์ข้อมูลในหลายระดับของส่วนประกอบและช่วยลดความซับซ้อนของโค้ด

นี่คือตัวอย่างการใช้ Context เพื่อแชร์ภาษาปัจจุบันในแอปพลิเคชัน:

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;  

 

ด้านบนเป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดระเบียบซอร์สโค้ด React โดยใช้ React Hooks และบริบท