شرح مفصل للطريقة لتنفيذ تطبيق رد فعل رد فعل واحد

بادئ ذي بدء ، قبل تعلم هذا الإطار ، تحتاج إلى فهم بعض المعرفة التالية:

1. أساسيات JS الأصلية

2. أساسيات CSS

3.NPM أساسيات إدارة الحزم

4. WebPack بناء أساسيات المشروع

5.es6 مواصفات

نقاط المعرفة الخمسة المذكورة أعلاه هي أيضًا مهام ما قبل الفهم التي يجب فهمها في تعلم أطر العمل الأمامية الأخرى.

لن أقول الكثير عن JS و CSS. NPM هي أداة إدارة الحزم الأكثر مدعومة والمهيمنة في الوقت الحاضر. يمكنك التفكير في ذلك إذا كنت لا تزال تستخدم Bower أو غيرها من الأدوات. بصفتها جيلًا جديدًا من أدوات التغليف ، سيطر WebPack بالفعل على أدوات التغليف الأمامية ولديه ميزة كبيرة مقارنة بالمتصفح. أما بالنسبة لمواصفات ES6 ، على الرغم من أن المتصفحات السائدة غير متوافقة الآن ، يمكن تحويلها باستخدام محولات مثل Babel.

من خلال الجمع بين بعض الأطر الأمامية الأخرى ، أعتقد شخصياً أن هناك ثلاثة أشياء أساسية لبناء تطبيقات من صفحة واحدة: المكونات والتوجيه وإدارة الدولة . بعد ذلك ، سأقدم الرد بناءً على هؤلاء الثلاثة ، بالطبع سيكون هناك بعض نقاط المعرفة الإضافية التي تتخللها هناك.

عناصر

تعتمد كتابة مكونات React واتصالها بشكل أساسي على وحدات ES6 وبناء جملة JSX. هنا مثال:

 // main.jsimport React من 'React'import {render} من' React-dom'import myComponent from './component.js'import' ./main.css'/ main component class mydemo mydemo refact.) document.getElementById ('app')) // component.js // subcomponent import React من 'React'export class myComponent يمتد React.component {render () {return (<viv> <p> هذا هو مكون! </p> </fiv>)}}}

مقارنةً بإطار Vue.js ، أعتقد شخصياً أن طريقة كتابة مكونات React ليست مريحة مثل Vue ، ولا يزال نمط CSS الخاص بالمكون منفصلًا عن الجزء الخارجي للمكون ، لذلك ليس من المريح للغاية الحفاظ عليه.

من هذا المثال ، يمكننا رؤية ميزات DOM و JSX من React. بالمقارنة مع الأطر الأخرى ، لا يمكن لـ DOM الظاهري من React تحسين أداء الصفحة فحسب ، بل تمنع أيضًا هجمات XSS ، إلخ

أما بالنسبة لبناء جملة JSX ، فهو نوع من سكر بناء الجملة من JS. يمكننا بسهولة تنفيذ بعض الوظائف من خلال هذا السكر بناء الجملة. هنا ، يقوم JSX بتحويل بناء جملة XML إلى JavaScript النقي ، ويتم تحويل عناصر XML ، والسمات والعقد الفرعية إلى معلمات React.CreateElement. تشمل السكريات المماثلة لبناء JS TypeScript وأنواع أخرى.

التوجيه

تعد آلية التوجيه الأمامية واحدة من أهم الروابط في بناء تطبيقات صفحة واحدة (SPAS). من خلال التوجيه الأمامي ، يمكننا تحسين تجربة المستخدم دون الحصول على جميع البيانات من الخادم في كل مرة ، وذلك لتقديم الصفحة إلى المستخدم بسرعة.

توجيه رد الفعل يعتمد على جهاز توجيه رد الفعل . رد فعل Ruter يحافظ على واجهة المستخدم وعنوان URL. يحتوي على واجهات برمجة التطبيقات البسيطة والميزات القوية مثل تحميل الكود ، ومطابقة التوجيه الديناميكي ، وإنشاء انتقال الموقع الصحيح.

فيما يلي مثال على توجيه رد الفعل:

 استيراد React ، {component} من 'React'Import {render} من' React-dom'import {router ، route ، indexroute ، link ، browserhistory} من 'React-Router'Const Active = {color:' red '} تطبيق class component {render () {return (<div> <h1> Activestyle = {Active}> home </link> </li> <li> <link to = "/user" activestyle = {active}> صفحة المستخدم </link> </li> </ul> {this.props.children} </siv>)}} فهرس فئة يمتد مفاعل {render () يمتد React.component {render () {return (<viv> <h2> المستخدمون </h2> </viv>)}} reender ((<Router History = {browserHistory}> <route path = "/" component = {app}> <indexroute component = {index}/ </router>) ، document.getElementByid ('app'))

يتم سرد طريقة توجيه واحدة فقط لـ React هنا. بالمقارنة مع الأطر الأخرى ، فإن بناء جملة توجيه التفاعل أكثر سهولة في الفهم.

إدارة الحالة

إدارة الدولة ليست تطبيق صفحة واحدة ضرورية. يمكن أن يساعدنا استخدامه في إدارة التغييرات في كل ولاية بطريقة موحدة ، مما يجعل عملية المشروع بأكملها واضحة وقابلة للصيانة. يمكن لإدارة الدولة لتنفيذ React استخدام Redux الموصى بها رسميًا.

يستخدم Redux تدفق بيانات صارم في اتجاه واحد. يتم تخزين حالة التطبيق بأكملها في شجرة كائن ، ولا توجد شجرة الكائن هذه إلا في المتجر الوحيد.

مثال المشروع

لقد كتبت هنا موقعًا واحدًا على موقع صفحة واحدة باستخدام React ، والصفحة كما يلي:

أحضر

لأنني استخدمت Fetch لتفاعل Ajax في المثال أعلاه ، سأقدم بإيجاز الجلب هنا.

يمكننا استخدام Fetch باعتباره الجيل التالي من تقنية Ajax ، والتي تستخدم طريقة الوعد الشعبية الحالية.

باستخدام Fetch ، يمكننا كتابة Ajax للتفاعل مع بيانات مثل هذه:

 // الحصول على طريقة البيانات fetchfn = () => {fetch ('../../ data.json') .Then ((res) => {console.log (res.Status) ؛ return res.json ()}) .then ((data) => console.log (e.message)})}

لخص

إن أهم شيء في تعلم الإطار هو عدم تعلم تقنيتها ، ولكن تعلم الأفكار لحل المشكلات التي تجلبها. من خلال تعلم إطار React ، يمكنك اكتشاف عقلية جديدة من ميزاتها الجديدة الفريدة. فقط عند توسيع مستوى التفكير ، يمكنك الطيران بحرية في المحيط في الواجهة الأمامية. آمل أن يكون هذا المقال مفيدًا للجميع لتعلم رد الفعل.