React مقابل Angular: الفروق ومتى تختار كلًا منهما

React مكتبة JavaScript لبناء واجهات المستخدم، وAngular إطار عمل كامل لبناء تطبيقات الويب. مع React تكتب المكوّنات كدوال تُرجع JSX وتختار أدوات منفصلة للتوجيه والنماذج والبيانات؛ ومع Angular تكتب أصناف TypeScript مع قوالب HTML وتحصل على التوجيه والنماذج وعميل HTTP وحقن الاعتماديات جاهزة. إليك العدّاد نفسه بالاثنين.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

نسخة Angular من ذلك المكوّن:

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

الأفكار متطابقة واحدة بواحدة: useState(0) في React هي signal(0) في Angular، وonClick={...} هي (click)="..."، و{count} هي {{ count() }}. والفرق هو أين يعيش الكود: دالة واحدة تُرجع الترميز في React، وصنف مع نص قالب في Angular.

مكتبة مقابل إطار عمل

هذا هو الفرق الذي يقود معظم الفروق الأخرى. يغطي React العرض وحالة المكوّن. وكل ما عدا ذلك اختيارك:

• التوجيه: React Router، أو TanStack Router، أو المسارات المبنية على الملفات في إطار عمل.
• جلب البيانات: fetch في تأثير، أو TanStack Query، أو محمّلات إطار العمل ومكوّنات الخادم.
• النماذج: حقول متحكم بها عادية، أو إجراءات النماذج في React 19، أو React Hook Form.
• الحالة العامة: السياق، أو Zustand، أو Redux Toolkit، أو Jotai.

تتخطى فرق كثيرة معظم هذه الخيارات بالبدء من إطار عمل لـ React مثل Next.js أو React Router في وضع إطار العمل، الذي يجمع التوجيه وتحميل البيانات والعرض على الخادم.

أما Angular فيتخذ هذه الخيارات نيابة عنك: @angular/router، والنماذج التفاعلية والنماذج المبنية على القوالب، وHttpClient، وحقن الاعتماديات، وإعداد الاختبارات، وأداة ng التي تولّد المكوّنات والخدمات. يبدو كل مشروع Angular متشابهًا في عمومه، وهذا سبب شائع لاختيار المؤسسات الكبيرة له. والتكلفة مساحة أكبر للتعلم وحرية أقل في استبدال قطعة.

JSX مقابل القوالب

تُرجع مكوّنات React كود JSX، وهو JavaScript. الشروط هي && أو معامل ثلاثي، والقوائم هي .map()، وكل ما تستطيع فعله في JavaScript تستطيع فعله في الترميز. أما قوالب Angular فهي HTML بصيغتها الخاصة: @if، و@for مع track، وربط [property]، وربط (event)، والإدراج {{ }}. تُبقي القوالب الترميز والمنطق منفصلين بوضوح؛ وتُبقيهما JSX في مكان واحد وتعطيك اللغة كاملة. إليك قائمة مرشحة، الميزة الثانية للمقارنة.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

اكتب an في المربع وراقب وحدة التحكم: تعمل الدالة كلها من جديد مع كل ضغطة مفتاح، وتُعاد ببساطة حساب visible. والمكوّن نفسه في Angular، مع القالب في ملفه الخاص:

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

في Angular يعلن computed أن visible تعتمد على query، فيعرف Angular أي قالب يقرؤها ولا يعيد حساب visible إلا عندما تتغير query. وفي React لا يوجد إعلان: يُعاد تشغيل المكوّن ويُعاد الحساب. ويؤدي key={fruit} في React وtrack fruit في Angular المهمة نفسها، إذ يخبران الإطار أي عنصر في القائمة هو أي عنصر.

JavaScript أولًا مقابل TypeScript أولًا

React هو JavaScript عادية مع JSX، وTypeScript خيار تضيفه (npm create vite@latest my-app -- --template react-ts). معظم مشاريع React الجديدة تضيفها، لكن يمكنك تعلم React دون معرفة الأنواع. أما Angular فمبني لـ TypeScript: المزخرفات وحقن الاعتماديات وفاحص أنواع القوالب كلها تفترضها. إذا كان فريقك يكتب كودًا محدد الأنواع أصلًا، فلا مشكلة؛ وإذا كنت جديدًا على البرمجة، فهذا شيء إضافي تتعلمه في الوقت نفسه. تُظهر صفحة React مع TypeScript كيف تعمل الأنواع في جانب React.

تدفق البيانات واكتشاف التغييرات

كلاهما يمرر البيانات إلى الأسفل عبر المدخلات (props في React، وinput() أو @Input() في Angular) ويرسل الأحداث إلى الأعلى عبر دوال الاستدعاء (دوال تُمرَّر كـ props في React، وoutput() أو @Output() في Angular). والفرق هو كيف يلاحظ كل منهما التغيير.

React يعامل الحالة كلقطات غير قابلة للتعديل. تستدعي دالة ضبط بقيمة جديدة، فيعيد React تشغيل دالة المكوّن، ويقارن JSX الجديدة بالقديمة، ويرقّع DOM. لا شيء يُتتبع تلقائيًا: دالة العرض هي رسم الاعتماديات. وهذا سهل الفهم، والتكلفة أنك تضيف أحيانًا memo أو useMemo أو useCallback (أو تدع React Compiler يضيفها) لتتخطى العمل.

Angular استخدم تاريخيًا Zone.js لاكتشاف أي حدث غير متزامن ثم فحص شجرة المكوّنات بحثًا عن روابط متغيرة. أما Angular الحديث فينتقل إلى الإشارات (signals): تتتبع signal وcomputed وeffect القيم التي يقرؤها كل قالب، فلا يفحص Angular إلا المكوّنات التي تغيّرت إشاراتها، ويمكن للإصدارات الحديثة العمل دون Zone.js كليًا. ولا تعيد قوالب Angular تشغيل دالة كاملة مع كل تغيير كما تفعل مكوّنات React.

في الكود اليومي يبدو الاثنان أقرب مما توحي به الآليات: تحتفظ بالحالة، وتشتق منها القيم، وتتبعها الشاشة.

إدارة الحالة

في React تكون الحالة المحلية useState أو useReducer، وتُرفع الحالة المشتركة إلى أب أو توضع في سياق، وكثيرًا ما تعيش حالة التطبيق كله في مكتبة مخزن صغيرة. وفي Angular تكون الحالة المحلية إشارات على المكوّن، وتعيش الحالة المشتركة عادة في خدمة تُحقن حيثما احتيج إليها؛ فحقن الاعتماديات هو جواب Angular المدمج عن سؤال «كيف يتشارك مكوّنان متباعدان البيانات». ويوجد NgRx للفرق التي تريد مخزنًا بأسلوب Redux. ليس لـ React نظام لحقن الاعتماديات؛ ويؤدي السياق دورًا مشابهًا.

جدول المقارنة

منحنى التعلم

البدء بـ React أسرع. يستطيع المبتدئ الذي يعرف JavaScript بناء شيء حقيقي بعد تعلم المكوّنات وprops والحالة والتأثيرات، وتغطي صفحة ما هي React الفكرة كلها في دقائق. ثم ينتقل التعلم إلى وقت لاحق: عليك اختيار موجّه، ونهج لجلب البيانات، واستراتيجية للنماذج، ومشاريع React المختلفة تتخذ خيارات مختلفة.

أما Angular فبدايته أشد انحدارًا: TypeScript والمزخرفات والقوالب والإشارات وحقن الاعتماديات ووحدتا التوجيه والنماذج، وRxJS لبعض الواجهات. لكن بمجرد أن تعرفه، يستخدم كل مشروع Angular القطع نفسها بالطريقة نفسها، فيكون الانتقال بين المشاريع أسهل.

متى تختار أيًا منهما

اختر React عندما:

• تريد نواة صغيرة وحرية اختيار الباقي، أو تريد إطار عمل مثل Next.js للعرض على الخادم والمسارات المبنية على الملفات.
• تخطط لبناء تطبيقات هاتف أيضًا، حيث يعيد React Native استخدام نموذج المكوّنات نفسه.
• يكون الفريق في الغالب مرتاحًا مع JavaScript، أو تتعلم تطوير الواجهات الأمامية وتريد أقصر طريق إلى تطبيق يعمل.

اختر Angular عندما:

• يحتاج فريق كبير إلى بنية قياسية واحدة عبر مشاريع كثيرة، مع قرارات معمارية أقل للجدال حولها.
• تريد أن تُصان النماذج وHTTP والتوجيه وحقن الاعتماديات معًا من فريق واحد، وأن تُرقّى معًا عبر أداة سطر الأوامر.
• يكتب الفريق TypeScript أصلًا ويحب الخدمات المبنية على الأصناف والفصل الواضح بين القالب والمنطق.

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