تنظيم التعليمات البرمجية باستخدام خطافات React والسياق

عند العمل في مشروعات React واسعة النطاق ، من الضروري أن يكون لديك قاعدة بيانات جيدة التنظيم لتحسين قابلية الصيانة وقابلية التوسع.

في هذه المقالة ، سوف نتعمق في أفضل الممارسات لتنظيم كود المصدر الخاص بك في React ، مع التركيز على استخدام React Hooks والسياق.

 

استخدام خطافات React لإدارة الحالة

React Hooks هي مجموعة من الوظائف التي تتيح لك استخدام ميزات الحالة وميزات React الأخرى دون استخدام الفئات. هذا يساعد على كتابة كود أكثر إيجازًا وقابلية للقراءة. على سبيل المثال ، يمكننا استخدام الخطاف useState لإدارة الحالة في أحد المكونات.

هنا مثال:

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 تسمح لنا بمشاركة البيانات بين المكونات الفرعية دون المرور عبر المكونات الرئيسية. هذا يتجنب تمرير سمات البيانات عبر مستويات المكونات المتعددة ويساعد على تقليل تعقيد التعليمات البرمجية.

فيما يلي مثال على استخدام السياق لمشاركة اللغة الحالية في التطبيق:

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 والسياق.