عرض عناصر JSX في React

لا يُقدّم React عناصر JSX مباشرةً إلى المتصفح، بل يعتمد على حزمة react-dom ، التي تُوفّر طرقًا للتفاعل مع DOM الخاص بالمتصفح. تُشكّل هذه الحزمة جسرًا بين DOM الافتراضي في React وDOM الفعلي للمتصفح.

API createRoot

في React 18 والإصدارات الأحدث، يتولى react-dom معالجة هذه المكونات في DOM وتحديثها بكفاءة باستخدام API تُسمى createRoot . تربط هذه الواجهة تطبيق React بـ DOM الخاص بالمتصفح، وهي مسؤولة عن عرض واجهة المستخدم. تُحسّن هذه API الجديدة أداءً وتُمكّن من المعالجة المتزامنة، مما يجعل تطبيقات React أكثر كفاءةً واستجابةً.

قدمت React API createRoot في React 18 كجزء من تحديثات محرك عرض React . وهي تحل محل طريقة ReactDOM.render القديمة لتوفير أداء أفضل ودعم لميزات جديدة مثل العرض المتزامن .

كيف يعمل createRoot

تُستخدم دالة createRoot لإنشاء حاوية جذر React للعرض. بعد إنشاء الحاوية الجذرية، تُستخدم دالة render الخاصة بها لعرض عناصر React في DOM.

تأخذ طريقة createRoot وسيطة واحدة:

• مكان العرض: عقدة DOM في مستند HTML حيث سيتم عرض محتوى React .

بمجرد إنشاء الحاوية الجذرية، تأخذ طريقة ...