معظم الناس الذين يعملون في الواجهة الأمامية ، بطريقة أو بأخرى ، واجهوا رد فعل. هذه مكتبة JavaScript تساعد في إنشاء واجهات رائعة ؛ وقد اكتسبت في السنوات الأخيرة شعبية هائلة. ومع ذلك ، لا يعرف الكثير من الناس كيف يعمل في الداخل.
في هذه السلسلة من المقالات ، نقرأ الكود ونحاول معرفة ما الحزم التي تقع تحت غطاء محرك السيارة من أجل رد الفعل هي المسؤولة عن ، وما هي استخدامها وكيف تعمل. أهم العناصر الأساسية التي نستخدمها في المتصفح هي react ، react-dom ، events react-reconciler .
سننتقل بالترتيب واليوم لدينا مقال حول حزمة react . من يهتم بما هو موجود في هذه الحزمة - اذهب تحت القط.
بادئ ذي بدء ، سنقدم مثالًا صغيرًا ، على أساسه سننظر في هذه الحزمة. ستبدو الأداة لدينا كما يلي:
function App() { const [text, changeText] = React.useState('Initial'); return ( <div className="app"> <span>{text}</span> <input type="text" value={text} onInput={(e) => changeText(e.target.value)} /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ) ;
دعنا نلقي نظرة سريعة على هذا الرمز. نرى هنا نداء الخطاف من خلال React.useState('Initial') ، وقليلًا من JSX ونداء طريقة التجسيد للحصول على كل هذا على الصفحة.
في الواقع ، كما يعلم الكثير من الناس ، هذا ليس الرمز النهائي الذي يعالجه المتصفح. قبل تنفيذه ، يتم نقله ، على سبيل المثال ، مع بابل. في هذه الحالة ، ستتحول ما تُرجع الوظيفة إلى ما يلي:
return React.createElement( "div", { className: "app" }, React.createElement("span", null, text), React.createElement("input", { type: "text", value: text, onInput: function onInput(e) { return changeText(e.target.value); } }) );
من يهتم بالتجربة ويرى رمز بابل الخاص بك - رد بابل .
React.createElement
لذلك ، تلقينا الكثير من المكالمات إلى React.createElement() والوقت لمعرفة ما تقوم به هذه الوظيفة. سنصفها بالكلمات (أو يمكنك أيضًا إلقاء نظرة على الملف - ReactElement.js ).
أولاً وقبل كل شيء ، فإنه يتحقق ما إذا كان لدينا الدعائم (في الرمز ، الكائن مع الدعائم التي config يسمى config ).
بعد ذلك ، نتحقق مما إذا كان لدينا دعائم key ومرجعية غير undefined ، وحفظها ، إن وجدت.
if (hasValidKey(config)) { key = '' + config.key; }
النقطة المهمة هي أن config.key يتم config.key إلى سلسلة ، مما يعني أنه يمكنك تمرير أي نوع بيانات كمفتاح ، والأمر الرئيسي هو أنه ينفذ أسلوب .toString() أو .valueOf() وإرجاع قيمة فريدة لمجموعة معينة.
فيما يلي الخطوات التالية:
- نسخ الدعائم التي تم تمريرها إلى العنصر ؛
- أضف حقل
children هناك إذا مررناهم ليس بالدعائم ، ولكن كعنصر متداخل ؛ - نقوم بتعيين القيم الافتراضية من
defaultProps لتلك الخصائص التي لم defaultProps سابقًا.
عندما نقوم بإعداد جميع البيانات ، ندعو وظيفة داخلية تنشئ كائنًا يصف مكوننا. هذا الكائن يشبه هذا:
{ // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Symbol // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, }
هنا لدينا خاصية $$typeof ، والتي تعد رمزًا ، لذا قم بالانزلاق على أي حال أي كائن سيفشل.
خاصية type تخزن نوع العنصر المراد إنشاؤه. في حالة مثالنا ، ستكون هذه وظيفة App() والخطوط 'div' و 'span' و 'input' .
سوف تحتوي خاصية key على نفس المفتاح ، بسبب التحولات التي تطير إلى وحدة التحكم.
سوف تحتوي الدعائم على ما defaultProps ، children وما تم تحديده في defaultProps . خاصية _owner ضرورية للعمل الصحيح مع ref .
ترجمت إلى مثالنا ، فإن نتيجة React.createElement(App, null) ستبدو كما يلي:
{ $$typeof: REACT_ELEMENT_TYPE, type: App, key: null, ref: null, props: {}, _owner: null, }
بالإضافة إلى ذلك ، في وضع dev ، سيكون لدينا حقل إضافي سيتم استخدامه لعرض مكدس جميل مع اسم الملف والخط:
_source: { fileName: "/Users/appleseed/react-example/src/index.js", lineNumber: 7 }
لتلخيص القليل مما رأيناه أعلاه. تعمل حزمة react كمترجم بيننا وبين بقية الحزم التي تعمل بشكل أكبر على طلبنا ، وترجمة مكالماتنا إلى كلمات مفهومة ، على سبيل المثال ، إلى الموفق.
React.useState
في الإصدار 16.8 ، ظهرت السنانير. ما هو وكيفية استخدامها ، يمكنك قراءة الرابط ، ولكن الآن نلقي نظرة على ما يكمن في حزمة react .
في الواقع ، ليس هناك الكثير ليقوله. في جوهرها ، الحزمة هي واجهة يتم من خلالها توجيه تحدياتنا إلى كيانات داخلية.
لذلك ، لا يعد useState أكثر من سطرين من التعليمات البرمجية:
export function useState<S>(initialState: (() => S) | S) { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); }
السنانير المتبقية تبدو متطابقة تقريبا. هنا نحصل على المرسل الحالي ، وهو كائن ويحتوي على حقول ، على سبيل المثال useState . يتغير هذا المرسل اعتمادًا على ما إذا كان لدينا العرض الأول الآن أو نريد فقط تحديث المكون.
يتم تخزين التنفيذ الحقيقي للخطافات في حزمة react-reconciler ، والتي سوف نتحدث عنها في واحدة من المقالات التالية.
ما التالي
شيء آخر بعد قراءة هذه المقالة ، يمكنك فهم سبب استيراد حزمة التفاعل دائمًا ، حتى لو لم نستخدمها مباشرةً. هذا ضروري حتى بعد هضم jsx بواسطة الفقاعة ، لدينا متغير React .
اهتم فريق رد الفعل بهذا (وليس هذا فقط) ويعملون الآن على استبدال createElement .
محاولة شرح باختصار: هناك رغبة في استبدال الطريقة الحالية لإنشاء العناصر بـ jsx و jsxs . هذا ضروري لعدة أسباب:
- ناقشنا أعلاه كيفية عمل
createElement . يقوم دائمًا بنسخ الدعائم وإضافة حقل children إلى الكائن ، حيث يحفظ الأطفال الذين مررناهم كحجج للدالة (3 وسيطات وأكثر). الآن يُقترح القيام بذلك في مرحلة تحويل jsx إلى مكالمات javascript ، لأن إنشاء عنصر عبارة عن وظيفة تسمى بشكل متكرر وليست حرة في إجراء تعديل الدعائم في وقت التشغيل ؛ - يمكنك التخلص من استيراد كائن
import { jsx } from 'react' وظائف محددة فقط ( import { jsx } from 'react' ، على سبيل المثال) ، وبالتالي ، لن تكون قادرًا على إضافة ما لا import { jsx } from 'react' للتجميع. بالإضافة إلى ذلك ، ليس عليك حل حقل createElement الخاص بكائن React كل مرة ، لأنه غير مجاني أيضًا ؛ - ناقشنا أعلاه أن لدينا حالة خاصة عندما نخرج
key من الدعائم ونقدمه أكثر. الآن يُقترح أخذ key من jsx في مرحلة التحويل وتوجيه المعلمة الثالثة إلى وظيفة إنشاء العنصر.
اقرأ المزيد هنا . تحتوي حزمة react بالفعل على jsx و jsxs . إذا كنت ترغب في الالتفاف حول هذا الأمر ، يمكنك استنساخ مستودع التفاعل ، وتعيين علامة enableJSXTransformAPI إلى true في ملف ReactFeatureFlags.js الخاص بالحزمة shared وتجميع إصدار رد الفعل الخاص بك ( yarn build ) مع تمكين واجهة برمجة التطبيقات الجديدة.
خاتمة
حول هذا ، سوف أنهي قصتي اليوم حول حزمة react ، وفي المرة القادمة سوف نتحدث عن كيفية استخدام حزمة react لما يخلقه react ، وما هي الأساليب وكيفية تنفيذها.
شكرا لك على القراءة حتى النهاية!