إن الغرض من Web Web وأهميته واضح للغاية: دع رد الفعل الرمز الأصلي يعمل على الويب واترك مجموعة من التعليمات البرمجية تعمل على مختلف المحطات المحمولة. بالنسبة للواجهة الأمامية والأعمال ، هذا تحسن نوعي في كفاءة التنمية. في المراحل المبكرة من المشروع ، استشرنا أيضًا فريق React مع أسئلة مماثلة. اعتقد زميلهم الأساسي لفريقهم Vjeux أيضًا أن هذا أمر رائع للغاية وما أرادوا فعله في المستقبل. ربما عند React Native for Android ، قد يتم إصدار Web React. (نعم)
العمارة الفنية
هناك العديد من حلول التكيف على أساس React Native:
1. تطوير معيار الجسر ، و RN و RW ينفذ كل مجموعة من المعايير بالطريقة المثلى.
على سبيل المثال ، استنادًا إلى التصميم المرن ، نقوم بتنفيذ مجموعة متسقة من مكونات Flex ، <flex> ، <lel> ، إلخ.
2. يتماشى تمامًا مع RN ، RW ينفذ جميع واجهات برمجة التطبيقات التي يمكن أن تنفذها RN.
في المناقشة ، تم اختيار الأخير أخيرًا.
نظرًا لمفهوم React Web ، اترك React Code Native Code على جانب الويب ، فهو يحدد أن RW هو مجرد أداة بناء وتعبئة ، مفصولة عن RN ، وأن تنفيذ RW ليس ذا أهمية كبيرة. ثم يكون الاتجاه الفني العام واضحًا للغاية: لتنفيذ RN المتسق ، والمكون و API ، وأخيراً تجميعه في إصدار ويب من خلال أداة البناء.
مثال
دعونا نلقي نظرة على عملية إنشاء مشروع Web React:
الخطوة 1: تثبيت Web Web وأداء التكوين ذي الصلة
تتمثل هذه الخطوة بشكل أساسي في تثبيت حزم React-Web والتبعيات ذات الصلة ، وتكوين البرامج النصية لتغليف WebPack.
من أجل تبسيط هذه الخطوة ، قمنا بتطوير أداة React-Web-Cli ، والتي تتطلب فقط تنفيذ سطرين من الأوامر. في الوقت نفسه ، تدعم أداة سطر الأوامر أيضًا بدء تشغيل خادم التصحيح والتعبئة وغيرها من الوظائف ، والتي سيتم تقديمها لاحقًا.
قم بتثبيت أدوات CLI:
NPM تثبيت React-Web-Cli -G
تثبيت وتكوين Web Web ، وما إلى ذلك:
React-web init <دليل المشروع الحالي>
بعد اكتمال التنفيذ ، سيتم إنشاء المكتبات ذات الصلة بتثبيت NPM في دليل المشروع الخاص بك ، وسيتم إنشاء ملف الويب/WebPack.config.js تلقائيًا ، مع تكوين مكتوب فيه. في هذا الوقت هيكل الدليل هو:
. ├ readme.md├ android/├ index.android.js├ index.ios.js├ ├ ios/├ package.json└ web/└ webpack.config.js
الخطوة 2: إضافة ملف الإدخال وقم بتكوينات ذات صلة
يحتاج كل مشروع إلى الحصول على ملف إدخال ، والذي يتم استخدامه عادةً لتقديم المكونات الأخرى والاتصال بها وتهيئة المشروع ، مثل index.ios.js يمثل ملف الإدخال للمشروع على نظام iOS. من أجل الامتثال لمواصفات REACT Native File ، نقوم بإنشاء index.web.js كملف الإدخال ، ونحن بحاجة إلى تحديد أن الملف هو ملف الإدخال في WebPack. افتح ملف الويب/webpack.config.js وقم بتعديل متغير التكوين:
var config = {paths: {src: path.join (root_path ، '.') ، index: path.join (root_path ، 'index.web') ،} ،} ؛ثم نقوم بإنشاء ملف index.web.js. يشبه هذا الملف في الواقع index.ios.js ، ولكنه مختلف قليلاً. الفرق الرئيسي هو أن iOS يحتاج فقط إلى appregistry. للسماح لاستلام رمز JS الخاص بـ Xcode الخاص بـ Xcode ومعالجته ، بينما يحتاج جانب الويب إلى إدراج عقدة DOM قبل استخدامه. لذلك ، نحتاج إلى إضافة الكود التالي في أسفل index.web.js:
appregistry.registerComponent ('ares' ، () => Awes) ؛ if (platform.os == 'web') {var app = document.createElement ('div') ؛ document.body.appendChild (APP) ؛ appregistry.runapplication ('Awes' ، {roottag: app}) ؛}ثم يجب تقديم مكون النظام الأساسي في القسم العلوي. وبهذه الطريقة ، تمت معالجة جزء التكوين. قم بتنفيذ الأمر React-Web Start لبدء خادم تصحيح الأخطاء!
يمكنك تعديلها في الإرادة ، فهي تشبه التجربة في جهاز محاكاة React Native.
الخطوة 3: اختبار وحزم رمز إصدار الويب
عندما تنتهي من تعديل وتطوير واختبار جانب الويب ، يمكنك حزمه ونشره. الأوامر المعبأة بواسطة أداة React-Web-Cli هي:
رد فعل الحزمة
بعد التغليف ، سيتم تخزين الملف في الويب/ الإخراج/ الدليل. يمكنك فتح Index.html مباشرة (إذا كان التطبيق قد طلب العمليات ، فأنت بحاجة إلى التحقق من ذلك من الخادم المحلي) ، وبعد ذلك يمكنك نشره بعد التحقق.
ماذا حدث خلال هذه العملية؟
قد يكون لدى الطلاب الفضوليين بعض الأسئلة عندما يرون هذا. ماذا فعلت بعض أوامر أداة سطر الأوامر أعلاه؟ لماذا تتفاعل حزمة React Web Code الأصلية في نسخة من التعليمات البرمجية المستخدمة على جانب الويب؟ هل React Web Safe وموثوق؟ ما هي الأشياء في الداخل؟
هنا سأقدم بإيجاز مبادئ التنفيذ الخاصة بـ React Web وما هي الخطوات بالفعل.
React Web التي تنفذ Web React المكونات الأصلية على جانب الويب
يفصل React الرمز من بيئة النظام الأساسي ، وإضافة طبقة ، بحيث يمكن للمطورين القيام ببعض المعالجة على مستوى بيئة النظام الأساسي ، بحيث يمكن للشفرة نفسها أن تتكيف مع المزيد من بيئات المنصات ، إلخ.
على سبيل المثال ، يكتب React-Canvas رمزًا وفقًا لبناء React's Syntax ، ويقوم ببعض المعالجة على مستوى بيئة النظام الأساسي (يقوم بتشغيل رمز React الخاص بك ويجعله باستخدام قماش) ، ثم يحقق أهدافًا محددة (تحسين الأداء على الجانب المحمول).
في React Native ، ينطبق الشيء نفسه على قطعة من الكود على iOS و Android في نفس الوقت. قام فريق React Native ببعض المعالجة على التطبيق الأصلي للنظام الأساسي المقابل لتمكينه من تحليل التعليمات البرمجية التي تنفذ بناء جملة React.
هناك أيضا تطبيقات متماثلة. يستخدم الخادم React + Node.js لإنشاء HTML ، ويستخدم العميل رد فعل للحصول على تفاعلات ووظائف متعلقة بالعميل. الشيء نفسه صحيح.
تحقيقًا لهذه الغاية ، بدأ إصدار React V0.14.x بمكتبتين ، React و React-DOM ، والذي قام بالفعل بتجريد المعاملة الخاصة لمنصة المتصفح وحولته إلى مكتبة React-DOM وحدها.
الشيء الخاص حول React Native هو أن أدنى مستوى للتنفيذ للمكون هو تنفيذ Native ، لذلك لا يدعم علامات مثل Span و Div. الرسوم المتحركة ، وما إلى ذلك ، أيضا استدعاء مباشرة من أجل تقديم الواجهة. لذلك ، لا يتم دعم جانب الويب ، ولكن يمكن محاكاة معظم المكونات وتنفيذها باستخدام تقنية الويب. يمكن استخدام الرسوم المتحركة في CSS3 ، يمكن محاكاة العناصر الأساسية باستخدام نفس علامة HTML ، ويمكن التعامل مع مشكلات التخطيط والتوافق في CSS ، لذلك لا تحتاج شبكة React إلا إلى إعادة تنفيذ المكونات الأصلية React باستخدام تقنية الويب ، وبمساعدة React هذه الطبقة ، يمكن تنفيذ جزء من التعليمات البرمجية على منصات متعددة.
لإعطاء مثال بسيط للغاية ، مكون النص:
يستدعي تنفيذ React Native الكثير من تطبيقات التعليمات البرمجية الأساسية لـ React Native.
بالنسبة لجانب الويب ، ما عليك سوى استخدام علامة <span> لإخراج سطر من النص ، وبالتالي فإن تنفيذ Web React ينشئ مباشرة علامة <span> ، ولا بأس في ربط بعض الأحداث أو شيء ما.
يمكنك استخدام مكونات React الأصلية التي يمكن أن تعمل في عرض واجهة مستكشف واجهة المستخدم بثقة.
WebPack تساعدك على تبديل أهداف التغليف
بعد أن صنعت مكونًا متوافقًا مع جانب الويب ، ألا نحتاج إلى استبدال كل ما هو مطلوب ("-". خلاف ذلك ، كيف يمكنني استخدام مكونات الويب الخاصة بي لتعبئتها؟
تأتي حزمة الويب القوية مع عناصر تكوين الاسم المستعار لمساعدتك في حل هذه المشكلة:
حل: {alias: {'React-native': 'React-Web' ، 'ReactNativeart': 'React-Art' ،} ، extensions: ['' ، '.js' ، .jsx '] ،} ،وبهذه الطريقة ، عند العبوة ، يتم استبدال جميع الأماكن التي تتطلب ("React-Native") بحزمة React-Web ، ووحدة رد الفعل.
بالإضافة إلى ذلك ، يمكن تنفيذ طريقة أخرى للمقدمة باستخدام المكون الإضافي ، يرجى الاطلاع أدناه.
تقديم المكونات من خلال طريقة العجلة لتحسين الأداء
ستعمل WebPack وأدوات التغليف الأخرى التي تدعم مواصفات CommonJS على حزم جميع مكونات الطلب في الملف معًا. بالنسبة إلى React Native ، فإن حجم الكود غير ذي صلة ، ولكن بالنسبة لشبكة الهاتف المحمول ، فهو أكثر أهمية قليلاً. خاصة إذا كان مشروعك يحتاج فقط إلى مكونات نصية ، ولكنه محزن لأن يتطلب ("رد الفعل") يؤدي إلى تعبئة جميع المكونات.
استنادًا إلى المكون الإضافي لـ WebPack ، هناك طريقة أخرى لتقديم مكونات لحل هذه المشكلة ، يمكنك تسميتها طريقة العجلة. تتطلب هذه الطريقة تحميل WebPack المكون الإضافي للعجلة-Webpack-plugin. تم تحميل تكوين WebPack الافتراضي لك. يمكنك استخدامه مباشرة في المكون على النحو التالي:
var text = required ('ReactText') ؛بدلا من ما كان من قبل:
var {text} = require ('React-native') ؛وبهذه الطريقة ، عندما يتم تعبئة WebPack ، فإن السابق سيحزم فقط محتوى هذا المكون ، والذي يمكن أن يقلل من الحجم ويحسن الأداء. كيف يتم تحقيق هذا؟
عند تحميل حزمة الويب الخاصة بـ Plug-In ، سيتم فحص جميع المكونات أولاً ومعلومات @providesmodule في رأس المكون (مثل معلومات مكون النص) ، ثم عندما يكون اسم المكون مطلوبًا في ملفات أخرى ، سيتم تحديد موقع الملف تلقائيًا للتعبئة. في الوقت نفسه ، يمكنك أيضًا التمييز بين المنصات. حتى لو كان نفس الاسم ، فسيتم تمييز النظام الأساسي عند تغليف الملفات المقابلة (يتم تحديد الملفات وفقًا لقواعد التسمية لـ index.xxx.js).