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

1. مكونات العرض والحاوية

أحد الأنماط الأساسية في React هو نمط مكونات العرض التقديمي والحاوية، والذي يدور حول فصل الاهتمامات:

• مكونات العرض التقديمي: هذه المكونات مسؤولة عن كيفية ظهور الأشياء. إنهم يتلقون البيانات وعمليات الاسترجاعات من خلال الدعائم ولكن ليس لديهم منطق خاص بهم. هدفهم الوحيد هو تقديم واجهة المستخدم.

• مكونات الحاوية: تقوم هذه المكونات بإدارة كيفية عمل الأشياء. أنها تحتوي على المنطق، وإدارة الحالة، والتعامل مع جلب البيانات أو معالجة الأحداث. تقوم مكونات الحاوية بتمرير البيانات إلى مكونات العرض التقديمي.

// Presentational Component
const UserProfile = ({ user }) => (
  

    
{user.name}
    
{user.email}
  
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  return ;
};

يشجع هذا النمط على الفصل بين الاهتمامات، مما يجعل صيانة التعليمات البرمجية واختبارها أسهل.

2. المكونات ذات الترتيب العالي (HOC)

المكونات ذات الترتيب العالي (HOCs) هي نمط تصميم قوي لإعادة استخدام منطق المكونات. HOC هي دالة تأخذ مكونًا وترجع مكونًا جديدًا بسلوك محسّن أو وظيفة مضافة.

يُستخدم هذا النمط بشكل شائع في الاهتمامات الشاملة مثل المصادقة أو السمات أو جلب البيانات.

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return 
You need to log in!
;
    }

    return ;
  };
};

// Usage
const Dashboard = () => 
Welcome to the dashboard
;
export default withAuth(Dashboard);

تعمل HOCs على تعزيز مبادئ DRY (لا تكرر نفسك) من خلال تمكين المنطق القابل لإعادة الاستخدام عبر مكونات متعددة.

3. عرض الدعائم

يتضمن نمط Render Props تمرير دالة كدعم إلى مكون، مما يسمح بالعرض الديناميكي للمحتوى بناءً على تلك الوظيفة. يعد هذا مفيدًا بشكل خاص لمشاركة المنطق ذو الحالة بين المكونات دون استخدام المكونات ذات الترتيب الأعلى.

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      

        {this.props.render(this.state)}
      
    );
  }
}

// Usage
const App = () => (
  
Mouse position: {x}, {y}
} />
);

يمنحك هذا النمط المرونة من خلال فصل المنطق عن واجهة المستخدم، مما يجعل المكونات أكثر قابلية لإعادة الاستخدام والتخصيص.

4. المكونات المركبة

يشيع استخدام نمط المكون المركب في المكتبات مثل جدول التفاعل أو جدول التفاعل. يسمح للمكون الأصلي بالتحكم في مجموعة من المكونات الفرعية. يعزز هذا النمط المرونة في بناء واجهات ديناميكية وقابلة لإعادة الاستخدام.

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    

      

        {children.map((child, index) => (
           setActiveTab(index)}>
            {child.props.title}
          
        ))}
      
      
{children[activeTab]}
    
  );
};

// Usage
Content of Tab 1
  
Content of Tab 2
;

يوفر هذا النمط واجهة برمجة تطبيقات نظيفة للتواصل بين الوالدين والطفل مع الحفاظ على مرونة المكونات وقابليتها للتخصيص.

5. المكونات الخاضعة للرقابة مقابل المكونات غير الخاضعة للرقابة

يوفر React طريقتين لإدارة مدخلات النموذج: المكونات الخاضعة للتحكم و المكونات غير الخاضعة للتحكم.

• المكونات التي يتم التحكم فيها: يتم التحكم في حالتها بشكل كامل بواسطة React عبر الدعائم، مما يجعلها أكثر قابلية للتنبؤ بها.

• المكونات غير المنضبطة: تعتمد هذه المكونات على المراجع للتعامل مباشرة مع DOM، مما يوفر تحكمًا أقل ولكن من المحتمل أن يكون أداءً أكبر.

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return  setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return ;
};

يعتمد الاختيار بين هذه الأنماط على ما إذا كنت بحاجة إلى تحكم دقيق أو تحسينات خفيفة في الأداء.

6. خطافات مخصصة

تسمح لنا React Hooks ببناء منطق مخصص بطريقة قابلة لإعادة الاستخدام. من خلال استخراج المنطق المشترك في خطافات مخصصة، يمكننا تجنب تكرار التعليمات البرمجية وجعل قاعدة التعليمات البرمجية الخاصة بنا أكثر نمطية.

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return 
Error: {error.message}
;
  if (!data) return 
Loading...
;

  return 
{data.someField}
;
};

تتيح الخطافات المخصصة فصلًا أفضل بين الاهتمامات وإعادة استخدام الوظائف العامة بطريقة تعريفية.

خاتمة

تعد أنماط التصميم جزءًا مهمًا من كتابة تطبيقات React النظيفة والقابلة للصيانة والقابلة للتطوير. من خلال الاستفادة من الأنماط مثل مكونات العرض التقديمي ومكونات الحاوية، وHOCs، وRender Props، والمكونات المركبة، والخطافات المخصصة، يمكنك التأكد من أن التعليمات البرمجية الخاصة بك مرنة وقابلة لإعادة الاستخدام وسهلة الفهم.

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