تكرار السؤال: …
الإجابة المختصرة
مرحلة Render تحسب التغييرات في الذاكرة ويمكن مقاطعتها وتأجيلها بواسطة Fiber لضمان استجابة الواجهة، بينما مرحلة Commit تطبق التغييرات على الـ DOM الحقيقي دفعة واحدة وتعمل بشكل متزامن دون مقاطعة.
الشرح
محرك React Fiber يقسم العمل إلى وحدات عمل صغيرة (Fibers). خلال مرحلة Render، يقوم ريأكت باستدعاء المكونات ومقارنة الأشجار، ويمكنه إيقاف أو إرجاء التحديث إذا كانت هناك أحداث ذات أولوية أعلى (مثل إدخال المستخدم). بمجرد انتهاء الحسابات، تبدأ مرحلة Commit حيث يتم تحديث الـ DOM واستدعاء useLayoutEffect ثم useEffect.
مثال بالكود
import { useEffect, useLayoutEffect, useState } from "react";
function Counter() {
console.log("RENDER phase: a pure calculation — may run twice, be paused or be discarded");
const [count, setCount] = useState(0);
useLayoutEffect(() => {
console.log("COMMIT: DOM is updated, runs before the browser paints");
});
useEffect(() => {
console.log("COMMIT: runs after the browser has painted");
});
return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}أخطاء شائعة
- وضع آثار جانبية كالـ fetch أو تغيير document.title مباشرة في مرحلة الـ Render بدلاً من useEffect.
أسئلة متابعة
- ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟
- ما هو Virtual DOM في ريأكت وكيف يعمل خوارزمية الـ Reconciliation (Diffing)؟