تاريخ React – استعراض شامل وتحليل تقني

1. البدايات: النشأة داخل Facebook

في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة داخلية تُدعى BoltJS، ثم تغيّر اسمها إلى FaxJS، وأخيرًا استقر الاسم على React. تم إطلاق React كمكتبة مفتوحة المصدر رسميًا في مايو 2013. كان أول استخدام لها في Facebook Feed، ثم في Instagram عام 2012.

// الشكل الأولي لإنشاء عنصر في React بدون JSX
const element = React.createElement('h1', null, 'Hello, React!');

2. JSX و Virtual DOM: الثورة التفاعلية

React قدمت مفهوم JSX لدمج JavaScript مع شيفرة HTML بشكل أكثر وضوحًا، وأدخلت تقنية Virtual DOM لتقليل عدد العمليات على DOM الفعلي، مما حسن الأداء بشكل كبير خاصة في التطبيقات الكبيرة.

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>لقد ضغطت {count} مرة</p>
      <button onClick={() => setCount(count + 1)}>اضغطني</button>
    </div>
  );
}

JSX لم تكن مدعومة بشكل مباشر من المتصفح، لذا تُترجم باستخدام أدوات مثل Babel.

3. المكوّنات المعتمدة على الفئات (Class Components)

قبل ظهور Hooks، كانت React تعتمد على مكوّنات الفئات للتحكم في الحالة ودورات حياة المكوّن:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'زائر' };
  }

  componentDidMount() {
    console.log('تم تركيب المكوّن');
  }

  render() {
    return <h2>مرحبًا، {this.state.name}</h2>;
  }
}

رغم قوتها، كانت مكوّنات الفئات تزداد تعقيدًا بمرور الوقت، مما دفع نحو البحث عن بديل أبسط وأكثر مرونة.

4. Hooks: نقلة نوعية في كتابة المكوّنات

تم تقديم React Hooks في الإصدار 16.8 عام 2019، لتسمح باستخدام الحالة والتأثيرات الجانبية في المكوّنات الوظيفية. من أشهرها:

• useState لإدارة الحالة المحلية.
• useEffect لتنفيذ منطق بعد التصيير.
• useContext للوصول إلى السياق (Context).

function Clock() {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>الوقت الحالي: {time.toLocaleTimeString()}</p>;
}

5. React Fiber: إعادة كتابة جوهر React

React Fiber هو محرك التصيير الجديد الذي قُدّم في React 16، يسمح بتقسيم العمل إلى أجزاء صغيرة يمكن معالجتها بشكل غير متزامن، مما مكن React من تنفيذ التصيير المتزامن وتحسين تجربة المستخدم.

6. Server-Side Rendering (SSR) ومكونات الخادم

منذ بداياتها، دعمت React التصيير على الخادم (SSR) باستخدام ReactDOMServer. لكن ظهرت لاحقًا React Server Components لتفصل بين منطق الخادم والعميل وتقلل التكرار وتحسن الأداء.

async function ProductServer() {
  const res = await fetch('https://api.example.com/products/1');
  const product = await res.json();
  return <div>المنتج: {product.name}</div>;
}

7. React 19: تحديثات موجهة لتجربة المطور

React 19 (ديسمبر 2024) جلب مزايا قوية مثل useFormStatus و Server Actions، لتبسيط إدارة النماذج وتحسين التفاعل مع الخادم:

function ContactForm() {
  const status = useFormStatus();
  return (
    <form action="/api/contact">
      <input name="email" required />
      <button disabled={status.pending}>إرسال</button>
    </form>
  );
}

8. التحسينات الذكية وحفظ الحالة خارج الشاشة

React الآن يدعم الاحتفاظ بالحالة حتى للمكوّنات غير المرئية في واجهة المستخدم، مثل Preserving Offscreen State، مما يحافظ على معلومات مثل scroll أو بيانات النموذج عند التنقل بين الصفحات.