العودة للمقالات

الدليل الكامل لأنماط مكونات React الحديثة في عام 2024

Majd Muhtaseb15‏/11‏/202512 دقيقة

مقدمة

أنماط مكونات React تتطور باستمرار! يغوص هذا الدليل في بعض الأساليب الحديثة لكتابة مكونات React قابلة لإعادة الاستخدام وسهلة الصيانة في عام 2024. سنغطي المكونات المركبة (Compound Components)، وخاصية العرض (Render Props) (بإيجاز)، والأنماط القائمة على الخطافات (Hooks) التي تزداد شعبية.

المكونات المركبة (Compound Components)

تسمح لك المكونات المركبة بمشاركة الحالة والمنطق ضمنيًا بين المكونات الأصلية والفرعية. إنها تخلق واجهة برمجة تطبيقات (API) أكثر تعريفية وتقلل من تمرير الخصائص (prop drilling).

import React, { createContext, useContext, useState } from 'react';

const ToggleContext = createContext();

const Toggle = ({ children }) => {
  const [on, setOn] = useState(false);
  const toggle = () => setOn(prev => !prev);

  return (
    <ToggleContext.Provider value={{ on, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
};

const ToggleOn = ({ children }) => {
  const { on } = useContext(ToggleContext);
  return on ? children : null;
};

const ToggleOff = ({ children }) => {
  const { on } = useContext(ToggleContext);
  return on ? null : children;
};

const ToggleButton = () => {
  const { on, toggle } = useContext(ToggleContext);
  return <button onClick={toggle}>{on ? 'تشغيل' : 'إيقاف'}</button>;
};

Toggle.On = ToggleOn;
Toggle.Off = ToggleOff;
Toggle.Button = ToggleButton;

export default Toggle;

// الاستخدام:
// <Toggle>
//   <Toggle.On>الزر قيد التشغيل!</Toggle.On>
//   <Toggle.Off>الزر متوقف عن التشغيل!</Toggle.Off>
//   <Toggle.Button />
// </Toggle>

خاصية العرض (Render Props) (نظرة سريعة)

تعتبر خاصية العرض صالحة، ولكن يتم استبدالها غالبًا بالخطافات (Hooks). إنها تتضمن مكونًا يقبل دالة كخاصية ويستدعي هذه الدالة لعرض المحتوى.

import React from 'react';

const Mouse = ({ render }) => {
  const [x, y] = React.useState({ x: 0, y: 0 });

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

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {render(x, y)}
    </div>
  );
};

// الاستخدام:
// <Mouse render={(x, y) => (
//   <h1>موضع الماوس هو ({x}, {y})</h1>
// )} />

الأنماط القائمة على الخطافات (Hooks)

توفر الخطافات طريقة أكثر مباشرة ومرونة لمشاركة المنطق. تعتبر الخطافات المخصصة (Custom Hooks) مفتاحًا لاستخراج السلوك القابل لإعادة الاستخدام.

import { useState, useCallback } from 'react';

const useToggle = (initialValue = false) => {
  const [on, setOn] = useState(initialValue);

  const toggle = useCallback(() => {
    setOn(prev => !prev);
  }, []);

  return { on, toggle };
};

export default useToggle;

// الاستخدام:
// const { on, toggle } = useToggle();
// <button onClick={toggle}>{on ? 'تشغيل' : 'إيقاف'}</button>

خاتمة

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