انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: دورة التصيير والاعتماد والحالة كلقطة ثابتة

Trigger Render Commit Pipeline مراحل التحفيز والتصيير والاعتماد

تتبّع مراحل التحفيز والتصيير والاعتماد الثلاث في React، وافهم كيف تتصرف الحالة كلقطة ثابتة في كل تصيير، وتجميع التحديثات ودوال التحديث والتهيئة الكسولة.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمر كل تحديث يظهر على شاشة تطبيق React عبر خط أنابيب هندسي واضح من ثلاث مراحل متتابعة:

  1. تحفيز التصيير (Trigger): ينطلق إما عند التركيب الأولي للتطبيق عبر createRoot أو عند استدعاء دالة تحديث حالة مثل setSeats().
  2. تصيير المكون (Render): تستدعي React دالة المكون النقية لحساب شجرة JSX الجديدة.
  3. الاعتماد في المتصفح (Commit): تطبّق React الفروق الفعلية فقط على عقد DOM المتغيرة دون المساس بالعناصر الثابتة.
الصف 2 كود برمجي
HTML 
import { useState } from 'react';

function OrderTicket() {
  const [n, setN] = useState(1);
  return (
    <div className="rx-card">
      <p>Tickets Requested: {n}</p>
      <input placeholder="Type note (preserved!)" />
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
}
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (دورة التصيير والاعتماد والحالة كلقطة ثابتة)