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

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

يقسم نمط الحاوية والعرض التقديمي المكونات إلى فئتين:

• مكونات العرض التقديمي: التركيز على كيفية ظهور الأشياء (واجهة المستخدم).
• مكونات الحاوية: التركيز على كيفية عمل الأشياء (المنطق وإدارة الحالة).

يسمح هذا الفصل بإعادة الاستخدام بشكل أفضل، واختبار أسهل، ورمز أكثر وضوحًا.

مثال: مكونات العرض والحاوية

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

const UserList = ({ users }) => (
  

{users.map((user) => (
• {user.name}
))}

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  return ;
};

export default UserContainer;

هنا، UserList هو مكون عرض تقديمي يستقبل المستخدمين كدعائم، بينما يتعامل UserContainer مع جلب البيانات وإدارة الحالة.

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

A المكون ذو الترتيب العالي (HOC) هي دالة تأخذ مكونًا كوسيطة وترجع مكونًا جديدًا. يتم استخدام المكونات ذات الترتيب الأعلى بشكل شائع في الاهتمامات الشاملة مثل المصادقة أو التسجيل أو تحسين سلوك المكونات.

مثال: إنشاء مخصص خاص للتفويض

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return ;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => 
Welcome to the Dashboard
;

export default withAuthorization(Dashboard);

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

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

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

مثال: استخدام عناصر العرض لتتبع الماوس

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

  return 
{render(position)}
;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

const App = () => (
   (
      

        Mouse position: ({x}, {y})
      
    )}
  />
);

export default App;

يستخدم مكون MouseTracker خاصية العرض لتمرير بيانات موضع الماوس إلى أي مكون، مما يجعله قابلاً لإعادة الاستخدام بشكل كبير.

4. نمط الخطافات المخصص

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

مثال: إنشاء خطاف مخصص لجلب البيانات

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return 
Loading...
;

  return (
    

{data.map((post) => (
• {post.title}
))}

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

5. نمط المكونات المركبة

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

مثال: إنشاء علامات تبويب باستخدام مكونات مركبة

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
   setActiveIndex(index)}>{children}
);

const TabPanel = ({ children, isActive }) => (isActive ? 
{children}
 : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  Tab 1Tab 2Content for Tab 1Content for Tab 2
);

export default App;

يدير مكون علامات التبويب الحالة، بينما تعمل مكونات Tab وTabPanel معًا لعرض المحتوى المبوب.

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

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

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

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

const TextInputControlled = () => {
  const [value, setValue] = useState('');

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

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

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

  return (
    
      Log Input Value
    >
  );
};

export default TextInputUncontrolled;

في المكونات الخاضعة للتحكم، تتحكم React بشكل كامل في حالة النموذج، بينما في المكونات غير الخاضعة للتحكم، تتم إدارة الحالة بواسطة DOM نفسه.

7. نمط مصنع الخطافات

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

مثال: إدارة الحالة الديناميكية باستخدام Hooks Factory

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    

       setters

.name(e.target.value)}
      />
       setters.age(parseInt(e.target.value))}
      />
      
Name: {states.name}
      
Age: {states.age}
    
  );
};

export default App;

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

خاتمة

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

هل ترغب في التعمق في أي من هذه الأنماط أو استكشاف مواضيع أخرى؟